在线客服
扫描二维码
下载博学谷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基础、数据分析库Pandas、科学计算库numpy、Matplotlib绘图。核心编程课程适用零编程基础学员、python编程基础薄弱的学员、对机器学习感兴趣的学员、对深度学习感兴趣的学员学习。
6112
2019-07-24 11:43:29
零基础学习Python 基础知识入门篇
众所周知，Python是一门集优雅、明确和简单于一体的编程语言，近来随着Python语言在各个行业领域的广泛运用，Python的学习者是越来越多。本文为大家整理了零基础小白入门Python的必需要学习的一些基础知识，内容包括标识符、关键字、引号、编码、输入输出、缩进、多行、注释、数据类型等等。有学习需要的小伙伴赶紧看下去吧！
5421
2019-11-03 22:23:49
学Python为什么要掌握Linux?
Python作为新手友好的开发语言，近年来风头强劲，无论是不断扩大的开发应用领域，还是就本身的语言优势而言，都吸引了不少的学习者。对于刚刚入门Python不久的朋友来说，相信都会有这样的疑问，学Python为什么要掌握Linux？确实Python支持Windows系统，但是学习Linux认识刚需。具体原因分析如下：
6284
2019-11-24 18:52:11
怎么开始学习Python开发？0基础入门Python
怎么开始学习Python开发这个问题，在各大社群网站上常常看到想要转行IT，或者是想学习编程但不知如何开始的网友。对于新手来说，掌握Python基础是关键，了解HTML，CSS，JavaScript，Ajax，jQuery，React，SQL，服务器脚本等知识。
4306
2020-05-15 17:41:38
入门Python学习难吗？怎样规划学习路线？
入门Python学习难吗？怎样规划学习路线？Python是一种跨平台的计算机程序设计语言。Python现在在各个邻域都有十分广泛的应用，在近几年的上升趋势十分明显，未来的发展前景也十分广阔。Python入门不难，但入门后不断学习是十分重要的，相对来说较为漫长。
4435
2020-06-08 11:17:25
