在线客服
扫描二维码
下载博学谷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”的热潮是一浪高过一浪，就连SOHO中国董事长潘石屹近来也在微博上宣布，要开始学习语言Python。为什么要学Python？在当下这个人工智能高速发展的时代，答案是显而易见的。但是还是有许多人都不明白学Python到底有什么用。本文就来和大家聊一聊Python的学习理由以及其广泛的应用领域，相信大家就能明白为什么Python的火爆势头如此迅猛。
9688
2019-12-06 16:09:14
Python好学吗？要学多久？
许多想要学习编程语言的小白都会问这样一个问题，Python好学吗？难不难？老实说零基础学习任何编程语言都是有一定难度的。但是Python简单易懂的语法使得学习的难度大大降低了，因此Python可以说对新手最友好的编程语言。那么Python要学多久呢？根据博学谷的课程安排，即便是零基础的学员，半年以内也能熟练掌握Python。
6417
2020-07-01 12:06:53
Python爬虫工程师培训课程学什么？
Python爬虫工程师培训课程学什么？通常需要掌握Python基础知识、Python高级编程、Python WEB 后端软件开发技术、Python多领域开发相关的知识点，Python编程简单高效是初学者入门IT行业不错的选择。
4599
2020-08-28 14:41:20
表格标签是什么？起什么作用？
表格是现在较常用的一种标签，常见处理、显示表格式数据，在HTML网页中要想创建表格需要使用表格相关的标签。HTML标签分别为 <table></table>、<tr></tr>、<td></td>是创建表格的基本标签缺一不可。
6447
2021-12-14 14:02:29
变量作用域是什么？怎么用？
变量作用域是什么？怎么用？变量作用域即变量的可用性范围。变量作用域，变量的可用性范围；全局变量就是在函数外定义的变量，可以在不同函数内使用。
3527
2021-12-27 14:55:57
