选择器千千万万种,哪种适合你?

前言

最近写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>

如图:

image

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>

如图:

image

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>

如图:

image

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>

如图:image

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>

如图: image

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>

如图:

image

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>

如图:

image

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>

如图:

image

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>

如图:

image

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>

如图:

image

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>

如图:

image

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>

如图:

image

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>

如图:

image

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>

如图:

image

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>

如图:

image

易混淆的点

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>

如图:

image

: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>

如图:

image

Last

以往使用选择器都带着蒙对了就算了的心态,后来发现这样很容易出bug,并且不容易维护,总结一篇文章列出经常会用到的选择器,和一些比较容易混淆的选择器,方便以后查阅,如果顺便能帮到你,那就太好了。