在线客服
扫描二维码
下载博学谷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选择器、组选择器、伪类选择器。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
CSS显示特性display属性的使用介绍
下一篇：
CSS 元素溢出是什么？怎么使用？
相关推荐 更多
Python学习网站有哪些？Python基础教程网站推荐
Python学习网站有哪些？Python基础教程网站推荐：菜鸟教程、PHP中文网、PHP中文网、W3C、Reddit、博学谷、python中文学习大本营、Python 3 Module of the Week、Welcome to Python for you and me、CheckiO is a code game coders。
6618
2019-09-23 19:06:02
为什么要学Flask框架？应该如何学习Flask框架？
为什么要学Flask框架？相信大家都明白框架学习的必要性，而Flask框架自身出色的优势也是大家要学习的必要原因。那么我们应该如何学习Flask框架？下面来为大家详细讲一讲，内容包括创建Flask的框架，使用配置文件，使用url传递参数等等，大家要是需要学习Flask框架的基础知识，就接着看下去吧！
7013
2019-11-13 16:51:45
Python编程在线学习难不难？
Python编程在线学习难不难？其实Python对于编程零基础的初学者来说，已经是十分简单易学的编程语言了，尤其比起C语言和Java这样的编程语言，它的学习难度要小得多。至于许多人担心线上学不好Python，就要看大家怎么学了。如果只是随便在网上东找一点，西找一点免费的学习资料，学再久也难免抓不住重点。这里建议大家了解一下博学谷的Python在线就业班的课程，能够带给大家更完善的线上教学服务。
4952
2020-05-26 10:27:02
set数据结构基础学习笔记
set又叫集合，它是⼀个十分重要的数据结构。它行为与数据结构列表数据结构相似，不同之处在于区别在于set包含重复的值。下面我们一起来看看set数据结构的概念、使用场景以及数学运算，总结梳理一下set数据结构的基础学习笔记。
4297
2020-06-29 10:02:32
拷贝文件夹cp和mv命令选项怎么使用？
拷贝文件夹cp和mv命令选项怎么使用？拷贝文件是我们办公文件中比较常用的命令，开发过程也需要掌握拷贝文件命令选项，今天我们就一起来学习一下。
3668
2022-03-08 11:40:55
