选择器千千万万种，哪种适合你？
前言
最近写CSS为了尽量少写js，于是用了比较多以前未用过的一些CSS选择器，这里写一篇文章来总结一些比较常用或者容易混淆的选择器概念，以便今后遗忘了能够进行快速回忆与查询。
关系类选择器
先用一个表格来说概述他们的功能：
| 选择器 |
例子 |
描述 |
| element,element |
div,p |
选择所有 div 元素和所有 p 元素 |
| element element |
div p |
选择 div 元素内部的所有 p 子元素 |
| element>element |
div>p |
选择 div 元素内部的 p 直接子元素 |
| element+element |
div+p |
选择紧接在 div 元素之后的 p 元素 |
| element~element |
p~ul |
选择前面有 p 元素的 ul 元素 |
element,element
这是一个选择多个元素的选择器，一般用于多个元素具有同一段CSS样式：
1
2
3
4
5
6
7
8
| .box1,.text2{
color: red;
}
<div>
<div className="box1">box1</div>
<div className="text2">text2</div>
</div>
|
如图：
element1 element2
选择element1下面所有element2元素，具有“穿透性”：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .box1 {
border: 1px solid red;
}
.box2 {
border: 1px solid blue;
}
.box1 .text2 {
color: skyblue;
}
<div className="box1">
<div className="text2">text2</div>
<div className="box2">
<div className="text2">text2</div>
</div>
</div>
|
如图：
element1>element2
选择element1下面的第一层element2子元素，不具有“穿透性”：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .box1 {
border: 1px solid red;
}
.box2 {
border: 1px solid blue;
}
.box1>.text2 {
color: skyblue;
}
<div className="box1">
<div className="text2">text2</div>
<div className="box2">
<div className="text2">text2</div>
</div>
</div>
|
如图：
element1+element2
选择紧接在 element1 元素之后的 element2 元素
1
2
3
4
5
6
7
8
9
10
| .text1+.text2{
color: skyblue;
}
<div>
<p className="text1">text1</p>
<p className="text2">text2</p>
<p className="text2">text2</p>
<p className="text3">text3</p>
<p className="text2">text2</p>
</div>
|
如图：
element1~element2
选择前面有element1的element2元素：
1
2
3
4
5
6
7
8
9
10
| .text2~.text3{
color: skyblue;
}
<div>
<p className="text1">text1</p>
<p className="text3">text2</p>
<p className="text2">text2</p>
<p className="text3">text3</p>
<p className="text2">text2</p>
</div>
|
如图： 
element1.element2
切记，没有这种写法！！！
type类选择器
type类选择器是强调type，不在乎子元素的位置和次序
| 选择器 |
例子 |
描述 |
| :first-of-type |
p:first-of-type |
选择属于其父元素的首个 p 元素 |
| :last-of-type |
p:last-of-type |
选择属于其父元素的最后 p 元素 |
| :only-of-type |
p:only-of-type |
选择属于其父元素唯一的 p 元素 |
| :nth-of-type(n) |
p:nth-of-type(2) |
选择属于其父元素第二个 p 元素 |
| :nth-last-of-type(n) |
p:nth-last-of-type(2) |
选择属于其父元素倒数第二个 p 元素 |
element:first-of-type
选择属于其父元素的首个为element的元素。
规则： 同类型首个元素 && 为element类的元素：
1
2
3
4
5
6
7
8
9
| p:first-of-type{
color: red;
}
<div>
<p>p1</p>
<p>p2</p>
<h1>h111</h1>
<h1>h222</h1>
</div>
|
如图：
element:last-of-type
选择属于其父元素的最后一个且为element类型的元素
规则： 同类型最后一个元素 && 为element类元素：
1
2
3
4
5
6
7
8
9
10
| p:last-of-type{
color: red;
}
<div>
<p>p1</p>
<p>p2</p>
<h1>h111</h1>
<h1>h222</h1>
</div>
|
如图：
element:only-of-type
选择属于其父元素里，同类型唯一且为 element 的元素
规则：同类型只有一个元素 && 为element类元素：
1
2
3
4
5
6
7
8
9
10
11
| p:only-of-type{
color: red;
}
h1:only-of-type{
color: red;
}
<div>
<p>p1</p>
<h1>h111</h1>
<h1>h222</h1>
</div>
|
如图：
element:nth-of-type(2)
选择属于其父元素同类型中第二个元素且为 element 元素
规则： 同类型第二个元素 && 为element类的元素：
1
2
3
4
5
6
7
8
9
10
11
| p:nth-of-type(2){
color: red;
}
<div>
<p>p1</p>
<h1>h111</h1>
<p>p2</p>
<p>p3</p>
<h1>h222</h1>
</div>
|
如图：
element:nth-last-of-type(2)
选择属于其父元素里同类型倒数第二个且为 element 类元素
规则： 同类型倒数第二个元素 && 为 element 类的元素：
1
2
3
4
5
6
7
8
9
10
11
| p:nth-last-of-type(2){
color: red;
}
<div>
<p>p1</p>
<h1>h111</h1>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<h1>h222</h1>
</div>
|
如图：
child类选择器
child强调的是父元素中的子元素的顺序
| 选择器 |
例子 |
描述 |
| :first-child |
p:first-child |
选择属于父元素的第一个为p标签的子元素 |
| :last-child |
p:last-child |
选择属于其父元素最后一个为p标签子元素 |
| :only-child |
p:only-child |
选择属于其父元素的唯一且为p标签子元素 |
| :nth-child(n) |
p:nth-child(2) |
选择属于其父元素的第二个为p标签子元素 |
| :nth-last-child(n) |
p:nth-last-child(2) |
选择属于其父元素的倒数第二个为p标签子元素 |
element:first-child
选择属于父元素中的第一个且为element类的元素
规则： 父元素中第一个子元素 && 类型为element
1
2
3
4
5
6
7
8
9
10
11
12
| p:first-child{
color: red;
}
h1:first-child{
color: red;
}
<div>
<p>p1</p>
<h1>h111</h1>
<p>p2</p>
</div>
|
如图：
element:last-child
选择属于父元素中的最后一个且为element类的元素
规则： 父元素中最后一个子元素 && 类型为element
1
2
3
4
5
6
7
8
9
10
11
12
| p:last-child{
color: red;
}
h1:last-child{
color: red;
}
<div>
<p>p1</p>
<h1>h111</h1>
<p>p2</p>
</div>
|
如图：
element:only-child
选择属于父元素中唯一个且为element类的元素
规则： 父元素中只有一个子元素 && 类型为element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| p:only-child{
color: red;
}
h1:only-child{
color: red;
}
<div>
<p>p1</p>
</div>
<div>
<h1>h11</h1>
<p>p1</p>
</div>
|
如图：
element:nth-child(n)
选择属于父元素中第n个且为element类的元素
规则： 父元素中第n个子元素 && 类型为element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .test1 p:nth-child(2){
color: red;
}
.test2 h1:nth-child(2){
color: red;
}
<div className="test1">
<p>p1</p>
<p>p2</p>
<h1>h11</h1>
</div>
<div className="test2">
<h1>h11</h1>
<p>p1</p>
<p>p2</p>
</div>
|
如图：
element:nth-last-child(n)
选择属于父元素中倒数第n个且为element类的元素
规则： 父元素中倒数第n个子元素 && 类型为element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .test1 p:nth-last-child(2){
color: red;
}
.test2 h1:nth-last-child(2){
color: red;
}
<div className="test1">
<p>p1</p>
<p>p2</p>
<h1>h11</h1>
</div>
<div className="test2">
<h1>h11</h1>
<p>p1</p>
<p>p2</p>
</div>
|
如图：
易混淆的点
element element vs element>element
规则：第一个具有“穿透性”，第二个不具备“穿透性”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .test1 .text1{
color: red;
}
.test3 > .text4{
color: red;
}
<div className="test1">
<p className="text1">p1</p>
<p>p2</p>
<div className="test2">
<p className="text1">p1</p>
</div>
</div>
<br/>
<div className="test3">
<p className="text4">p1</p>
<p>p2</p>
<div className="test4">
<p className="text1">p1</p>
</div>
</div>
|
如图：
:first-of-type vs :first-child
type强调的是种类，不关心子元素的位置顺序
child强调的是子元素的种类和位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| .test1 p:first-of-type{
color: red;
}
.test2 p:first-child{
color: red;
}
.test3 p:first-child{
color: red;
}
<div className="test1">
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div className="test2">
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
<div className="test3">
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
</div>
|
如图：
Last
以往使用选择器都带着蒙对了就算了的心态，后来发现这样很容易出bug，并且不容易维护，总结一篇文章列出经常会用到的选择器，和一些比较容易混淆的选择器，方便以后查阅，如果顺便能帮到你，那就太好了。