在线客服
扫描二维码
下载博学谷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数据分析早已成为现在职场人的必备核心技能。利用Python数据分析可以检查数据表、数据表清洗、数据预处理、数据提取和数据筛选汇总等。
7793
2020-04-01 15:03:59
Python基础语法学习之变量与赋值
近几年Python飞速发展，开始学习Python的人群不在仅仅局限于编程开发者，许多其他行业的从业者也开始将Python作为自己的职业技能。本文仍然是针对零基础的初学者，继续学习Python的基础语法——变量与赋值。主要内容包括变量和赋值的概念、代码演示、变量的特点和命名规范以及=符号。
7242
2020-04-16 10:53:42
不做程序员学Python有什么用？
不做程序员学Python有什么用？用处当然是十分广泛的，如果你的思维还停留在只有编程开发者才能学习Python，那就真的与现代社会脱节了。编程更像是一种工具，一种技能，而不仅仅只是一个职业岗位。尤其是以其高效简洁，新手友好著称的Python，更是适合所有想要提高工作效率的职场人掌握。下面我们一起看看学Python的实际作用，主要有自动化办公、数据分析以及Python的另类操作等等。
9540
2020-04-17 10:17:33
PyCharm 2020.1 稳定版新增功能盘点
众做周知，PyCharm有一整套在使用Python语言可以提高其开发效率的工具，而且IDE提供了一些用于Django框架下专业Web开发的高级功能。本月PyCharm 2020.1 稳定版已经发布，rebase 分支的可视化操作，更智能的PyCharm 调试器，专为编码设计的字体等等，更多的新增功能上线，大家现在跟我一起来快速看一看PyCharm 2020.1 稳定版新增功能的盘点吧~
8655
2020-04-20 14:32:39
Python for循环学习总结笔记
循环是任何语⾔的⼀个必备要素。同样地，for循环就是Python的⼀个重要组成部分。然而还有⼀些内容是初学者常常忽视的。下面是Python for循环学习总结笔记，一起来查漏补缺吧！
6955
2020-07-03 10:19:23
