在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
CSS 选择器的种类有哪些?怎么用?CSS 选择器的种类有标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器,作为程序员应该具备根据不同的场景选择适合的CSS选择器。
CSS 选择器学习目标:熟悉掌握CSS 选择器的种类。
1、CSS 选择器是什么?
CSS 选择器是用来选择标签的,选出来以后给标签加样式。
2、CSS 选择器的种类有哪些?
六种CSS 选择器:标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器
3、标签选择器
根据标签来选择标签,以标签开头此种选择器影响范围大一般用来做一些通用设置。
标签选择器示例代码:
4、类选择器
根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是CSS中应用最多的一种选择器。
类选择器示例代码:
5、层级选择器(后代选择器)
根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中减少命名。
层级选择器示例代码:
注意点: 这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器
6、 id选择器
根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
id选择器示例代码:
注意点: 虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。
7、组选择器
根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。
组选择器示例代码:
8、伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
伪类选择器示例代码:
CSS 选择器总结:CSS 选择器就是用来选择标签设置样式的;常用的 CSS 选择器有六种分别是:标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Python入门视频看哪个好?适合初学者的教学视频推荐
Python作为一门新手友好的编程语言,对于初学者来说,还是有一定的学习难度的。目前的Python学习资料在网上可以找到很多,那么Python入门视频看哪个好呢?本文就为大家推荐博学谷的免费Python入门教学视频—《从0开始学Python》,即使是初学者学完,也可以快速入门Python。
7530
2019-09-15 16:49:11
Lambda函数的语法结构解析
说到Lambda函数的语法结构,我想问大家一个问题,什么是Lambda表达式?众所周知,Lambda表达式是一个匿名函数,简单来讲就是没有函数名的函数,它还可以表示闭包。Lambda函数的出现简化了代码,它的语法结构可以这样写:(variable)->action。下面将详细为大家解析Lambda函数的语法结构,感兴趣的朋友可以接着看下去。
4737
2020-01-14 14:35:43
有哪些必备的Python基础知识
提到Python,应该很少有人没听过这个词,它的知名度已经表明了它的重要性。Python不仅仅是计算机从业者需要掌握的技能,它还可以运用到许多领域中,帮助人们快速解决工作中的问题,提高工作效率。
3827
2020-05-11 09:34:09
Python编程在线学习难不难?
Python编程在线学习难不难?其实Python对于编程零基础的初学者来说,已经是十分简单易学的编程语言了,尤其比起C语言和Java这样的编程语言,它的学习难度要小得多。至于许多人担心线上学不好Python,就要看大家怎么学了。如果只是随便在网上东找一点,西找一点免费的学习资料,学再久也难免抓不住重点。这里建议大家了解一下博学谷的Python在线就业班的课程,能够带给大家更完善的线上教学服务。
3885
2020-05-26 10:27:02
Python应该如何学习入门?
零基础学编程或提高办公效率,转行学习Python的伙伴越来越多,对于小白来说如何入门学Python规划自己的学习路线尤为重要,网上有大量的学习资源、书籍、视频教程和博客讲解基础知识,但是比较零散学习起来不成系统。
3763
2020-08-04 17:06:31