CSS是前端重要的组成部分，它能帮助我们通过选择器给标签添加各种样式效果。大家可能工作中最常用的选择器都是id、class以及标签选择器，但是当面对一些复杂的项目场景时，仅仅用这几个基础选择器去操作就会很麻烦。为了在开发中更加得心应手，本文我们就来看看CSS中的选择器都有哪些以及如何去灵活运用。
一、初级选择器
1.1 基础选择器
通配符（*）选择器
语法：*{属性：属性值；}
说明：*表示页面中所有的元素（标签），我们常用来重置样式。
实例：
*{
margin: 0;
padding: 0;
}
标签（元素）选择器
语法：标签名{属性：属性值；}
说明：标签选择器就是使用结构中元素名称直接作为选择符。
实例：
div{
width: 100px;
height: 100px;
}
类（class）选择器
语法：.class名{属性：属性值；}
说明：当我们使用类选择器时，需要先为相应的元素添加class属性。他的属性值就是我们要使用类名。
实例：
<h1 class="title">标题1</h1>
<h2 class="title">标题2</h2>
.title {
color: red;
}
注意：类名要尽量使用英文表示，不能使用数字或中文命名，并且尽量起一些有意义的名字，让别人能一眼看出来这个类名的作用。
类名可以有多个，多个类名之间要使用空格隔开。我们可以把一些标签元素相同的样式放到一个类调用，从而节省CSS代码，例如版心可以写统一样式。
id选择器
语法：#id名{属性：属性值；}
说明：id选择器是使用元素身上的id属性作为选择符。所以想要使用id选择器，需要先为元素上定义id属性。
实例：
<div id="box"></div>定义好id之后就可使用#box给对应的div上添加：
#box {
width: 100px;
height: 100px;
background-color: pink;
}
注意：起id名时不能用关键字（所有标签和属性都是关键字），并且一个id名称只能对应文档中一个具体的元素对象，因为id的特殊性，只能代表页面中某一个唯一的元素对象，就好比我们的身份证号，一个人只能对应一个唯一的id。
1.2 结构选择器
后代（包含）选择器
语法：选择器1（父） 选择器2（子）{属性：属性值；}
说明：选择器1和选择器2中间用空格隔开，表示选择选择器1中包含选择器2的所有后代元素。
实例：
<div class="box">
<h2>标题1</h2>
<p>段落1</p>
<p>段落2</p>
</div>
.box p {
color: red;
}
子代选择器
语法：选择器1>选择器2{属性：属性值；}
说明：用来选择紧挨着选择器1（父元素）的第一层符合选择器2的子元素。
实例：
<div class="box">
<h2>标题1</h2>
<div>
<h2>标题2</h2>
</div>
</div>
.box > h2 {
color: red;
}
全部兄弟选择器
语法：选择器1~选择器2{属性：属性值；}
说明：选择当前元素所有符合条件的兄弟元素。
实例：
<div class="box">
<h2>标题1</h2>
<p>段落</p>
<h2>标题2</h2>
<h2>标题3</h2>
</div>
p ~ h2 {
color: red;
}
注意：只能选中当前元素后面的元素。
相邻兄弟选择器
语法：选择器1+选择器2{属性：属性值；}
说明：选中当前元素紧挨着的后面的兄弟元素。
实例：上面的案例修改成：
p + h2 {
color: red;
}
注意：只能选中当前元素后面的元素，如果没有紧挨着当前元素就不会产生效果。
并集（群组）选择器
语法：选择器1，选择器2{属性：属性值；}
说明：用于对多个标签定义同样的样式，选择器之间用逗号分隔。
实例：这里我们依然用上述的结构：
p,
h2 {
color: red;
}
交集选择器
语法：选择器1选择器2{属性：属性值；}
说明：用于选择同时符合选择器1和选择器2条件的元素。
实例：
<h2 class="title">标题1</h2>
<h2>标题2</h2>
h2.title {
color: red;
}
二、属性选择器
属性选择器是通过元素的属性以及属性值来选择对应元素的，属性名我们可以自己定义。
属性的或运算
语法：选择器[属性名]{属性：属性值；}
说明：只要选择器元素中有当前属性就会被选中。
实例：
<h2 class="title" name>标题1</h2>
<h2>标题2</h2>
.title[name] {
color: red;
}
属性的与运算
语法：选择器[属性1][属性2]{属性：属性值；}
说明：选择同时包含属性1和属性2的元素。
实例：
<h2 class="title" name>标题1</h2>
<h2 name>标题2</h2>
h2[name][class] {
color: red;
}
属性值的筛选
语法：选择器[属性名='要求']{属性：属性值；}
说明：选择对应的属性值符合要求的元素。
实例：
<h2 class="title" name>标题1</h2>
<h2 class="title2" name>标题2</h2>
h2[class='title'] {
color: red;
}
前缀筛选^
语法：选择器[属性名^='要求']{属性：属性值；}
说明：选择属性值以当前要求开头的元素。
实例：
<h2 class="title">标题1</h2>
<h2 class="title2">标题2</h2>
<h2 class="stitle">标题3</h2>
h2[class^='tit'] {
color: red;
}
后缀筛选$
语法：选择器[属性名$='要求']{属性：属性值；}
说明：选择属性值以当前要求结尾的元素。
实例：这里我们使用上述的结构：
h2[class$='tle'] {
color: red;
}
包含限定*
语法：选择器[属性名*='要求']{属性：属性值；}
说明：选择属性值包含当前要求的元素。
实例：这里我们使用上述的结构：
h2[class*='title'] {
color: red;
}
包含限定~
语法：选择器[属性名~='要求']{属性：属性值；}
说明：选择属性值包含一个给定要求词（单独存在）的元素。
实例：
<h2 class="title">标题1</h2>
<h2 class="xx title xx">标题2</h2>
<h2 class="stitle">标题3</h2>
h2[class~='title'] {
color: red;
}
包含限定|
语法：选择器[属性名|='要求']{属性：属性值；}
说明：选择属性值只有给定要求或者是以给定要求开头后面用“-”拼接其他字符串的元素。
实例：
<h2 class="title">标题1</h2>
<h2 class="title-xx">标题2</h2>
<h2 class="title.xx">标题3</h2>
<h2 class="xx-title">标题4</h2>
h2[class|='title'] {
color: red;
}
三、伪类选择器:
CSS伪类选择器用于像某些元素添加特殊效果，比如第一个元素、某个元素的子元素、鼠标滑过的元素。
3.1 动态伪类选择器
动态伪类选择器在日常工作中主要用于超链接标签。
| 语法 | 描述 |
|---|---|
| a:link | 只能用于超链接，用来定义未访问的链接样式 |
| a:visited | 只能用于超链接，用来定义已访问的链接样式 |
| a:active | 定义鼠标按下时的样式 |
| a:hover | 定义鼠标滑过（悬停）时的样式 |
| input:focus | 用于选择获得焦点的表单元素 |
说明：前4个超链接伪类选择器联合使用时，就注意他们的顺序，a:hover必须在a:link和a:visited之后，a:active必须在a:hover之后。错误的顺序有时会使超链接的样式失效。
a:link{color:red;} /* 未访问的链接状态 */
a:visited{color:green;} /* 已访问的链接状态 */
a:hover{color:blue;} /*鼠标滑过链接状态*/
a:active{color:yellow;} /*鼠标按下去时状态*/
3.2 结构伪类选择器
结构伪类指利用页面的布局结构选择响应的元素。
| 语法 | 选择 | 描述 |
|---|---|---|
| E:first-child | 父元素的第一个子元素E | 等同于:nth-child(1) |
| E:last-child | 父元素的最后一个子元素E | 等同于:last-child(1) |
| E:nth-child(n) | 父元素E的第n个子元素E | n可以是整数、关键字even和odd，还可以是表达式2n+1。且n的起始值为1。如果当前n的元素不为F则无效 |
| E:nth-last-child(n) | 父元素的倒数第n个子元素E | 和:nth-child(n)的使用方式是一样的，但是计算顺序相反，其中:nth-last-child(1)匹配最后一个子元素F |
| E:nth-of-type(n) | 父元素内为E的第n个元素 | p:nth-of-type(2)选择父元素内的第二个为p的子元素 |
| E:nth-last-of-type(n) | 父元素内为E的倒数第n个元素 | p:nth-last-of-type(2)选择父元素内的倒数第二个为p的子元素 |
| E:first-of-type | 父元素内为E的第一个元素 | 等同于E:nth-of-type(1) |
| E:last-of-type | 父元素内为E的最后一个元素 | 等同于E:nth-last-of-type(1) |
| E:only-child | 父元素只包含一个元素，并且类型为E | 选择仅有一个子元素并且为类型E的元素 |
| E:only-of-type | 父元素只包含一个为E的元素 | 选择仅有一个子元素类型为E的元素 |
| :root | 所在文档的根元素 | 在html中，根元素始终是html。此时该选择器与html标签选择器是相同的 |
| E:empty | 没有子元素的元素 | 并且该元素不包含任何文本节点 |
| *:not(E) | 排除父元素内的E元素 | 选择父元素内不为E的其他元素(可以是指定元素) |
注意：结构伪类选择器中，子元素的序号是从1开始的，所以，当参数n的计算结果为0 时，将不选择任何元素。
3.3 其他伪类选择器
| 语法 | 类型 | 描述 |
|---|---|---|
| E:target | 目标伪类选择器 | 匹配被相关url指向的E元素 |
| E:lang(language) | 语言伪类选择器 | 匹配指定语言的元素 |
| E:checked | 选中状态伪类选择器 | 匹配form表单中处于选中状态的元素 |
| E:enabled | 可用状态伪类选择器 | 匹配form表单中处于可用状态的元素 |
| E:disabled | 不可用状态伪类选择器 | 匹配form表单中处于不可用状态的元素 |
四、伪元素选择器::
伪元素选择器可以帮助我们利用CSS创建新的标签元素（伪元素），从而达到简化结构的目的。
| 语法 | 描述 |
|---|---|
| E::after | 在E元素之后添加内容，需要与"content"属性配合使用 |
| E::before | 在E元素之前添加内容，需要与"content"属性配合使用 |
| E::first-letter | 给文本的第一个字母添加特殊样式 |
| E::first-line | 给文本的第一行添加特殊样式 |
| E::selection | 给被用户选中或处于高亮状态的E元素添加特殊样式 |
注意：利用before和after创建的元素属于行内元素，而这个元素我们不能在结构中看到，所以称它为伪元素。
五、选择器权重
在CSS中我们用四位数字表示选择器的权重，方便我们去判断样式的优先级。
当权重相同时，样式遵循就近原则，CSS中哪个选择器最后定义，就执行哪个选择器的样式。
| 选择器 | 权重 |
|---|---|
| 内联样式 | 1000 |
| id选择器 | 0100 |
| class选择器 | 0010 |
| 属性选择器 | 0010 |
| 伪类选择器 | 0010 |
| 伪元素选择器 | 0001 |
| 标签选择器 | 0001 |
| 通配符 | 0000 |
| 子选择器 | 0000 |
| 兄弟选择器 | 0000 |
| 后代选择器 | 所包含的选择器权重之和 |
| 继承样式 | 没有权重 |
!important代表权重最高（最终的样式）。
background-color：skyblue!important;所以最终样式的优先级应该为：
!important>行内样式>id选择器>class选择器=伪类选择器=属性选择器>标签选择器=伪元素选择器>通配符选择器>继承样式。
总结
以上就是为大家总结的CSS选择器的种类及功能。总的来说，碰到各种各样的工作场景，我们需要灵活运用这些选择器，并且当选择器样式冲突时，我们就得及时发现并且完成权重的解析从而解决问题。解析规则大致如下：
-
当不同选择器的样式设置有冲突时，高权重选择器的样式会覆盖低权重选择器的样式。
-
相同权重的选择器，样式遵循就近原则。哪个选择器样式最后定义，就会采用哪个样式。
-
需要注意，CSS具有继承性，即子标签会继承父标签的某些样式。但是继承样式没有权重。所以在嵌套结构中，不管父元素样式的权重多大，在子元素定义的样式都会覆盖继承来的样式。
扫一扫
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
