CSS选择器

前言

本文将介绍基本的CSS选择器使用方法。


CSS选择器

CSS选择器主要可以分为两大类:

  • 基础标签器
  • 复合选择器

除了基于HTML标签的属性选择元素,还有一些特殊的选择器:

  • 伪类选择器
  • 伪元素选择器

下面来逐一介绍。

基础标签器

元素选择器

直接选择元素标签

格式:element

示例:选择所有的<div>标签,将其文本内容设置倾斜样式

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
div{
font-style: italic;
}

效果如下:

类选择器

根据class属性选择元素

格式:.class

示例:将第三段(class=para3)的文本内容加粗

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
.para3{
font-weight: bolder;
}

效果如下:

ID选择器

根据唯一的id值选择对应的元素

格式:#id

示例:将第二段(id=para2)的文本增加下划线

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
#para2{
text-decoration: underline;
}

效果如下:

通配符选择器

选择页面中所有元素(一般不使用)

格式:*

示例:将所有内容增添下划线

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
*{
text-decoration: underline;
}

效果如下:

属性选择器

可以根据元素的属性以及属性值来选择元素

格式:[attribute]

示例:将带有title属性的元素内容添加橙色阴影

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
[title]{
text-shadow: 0.1em 0.1em 0.2em darkorange;
}

效果如下:

格式:[attribute=value]

示例:将第一段(class属性值为para1)的文本内容添加蓝色阴影

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
[class=para1]{
text-shadow: 0.1em 0.1em 0.2em blue;
}

效果如下:

格式:[attribute*=value]

示例:将class属性包含para值的元素内容添加绿色阴影

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
[class*=para]{
text-shadow: 0.1em 0.1em 0.2em green;
}

效果如下:

格式:[attribute^=value]

示例:将id属性以pa开头的元素内容添加黄色阴影

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
[id^=pa]{
text-shadow: 0.1em 0.1em 0.2em yellow;
}

效果如下:

格式:[attribute$=value]

示例:将id以le结尾的元素内容添加绿色边框

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
4
[id$=le]{
width: 220px;
outline: yellowgreen outset 5px;
}

效果如下:

复合选择器

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。

交集选择器

又称“标签指定式选择器”(即…又…)。由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器。

注意:两个选择器之间不能有空格

格式:

  • element.class
  • element#id

示例:选择<p>标签下class属性值为purple的元素,将其文本样式设置为紫色、加粗

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
4
p.purple{
color: purple;
font-weight: bolder;
}

效果如下:

并集选择器

由各个选择器通过逗号,连接而成。

任何形式的选择器都可以作为并集选择器的一部分

格式:

选择器1,选择器2,...

示例:选择<h2>标签和class属性值为orange的元素,将其文本样式设置为橙色、加粗

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
4
h2,[class="orange"]{
color: orange;
font-weight: bolder;
}

效果如下:

后代、儿子、兄弟选择器

又称为“包含选择器”,可以选择某元素后代的元素

格式:

element element

示例:选择<div>标签下class属性为blue的元素,将其文本样式设置为蓝色、加粗

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
4
div [class="blue"]{
color: blue;
font-weight: bolder;
}

效果如下:

只选择某个元素的子元素,而非所有后代元素

格式:

element>element

示例:选择<div>标签下所有的<p>元素,将其文本样式设置为红色、加粗,并添加粉色边框

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<em>
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</em>
</div>
<br>
<div class="para3" id="para3">
<em>
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</em>
</div>

注意:这里第二、三段文本被<em>标签包裹,而非直接在<div>标签下

1
2
3
4
5
6
div>p{
width: 280px;
color: red;
font-weight: bolder;
outline: hotpink outset 5px;
}

效果如下:

选择紧邻在一个元素之后的另一个元素(二者必须拥有相同的父元素)

格式:

element+element

示例:选择紧跟在id值为red1标签后的第一个<p>标签,将其文本样式设置为蓝色、加粗,并添加蓝色边框

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
4
5
6
[id="red1"]+p{
width: 280px;
color: cornflowerblue;
font-weight: bolder;
outline: deepskyblue outset 5px;
}

效果如下:

选择一个元素之后所有指定的同级元素

格式:

element~element

示例:选择紧跟在id值为red1之后所有的<p>标签,将其文本样式设置为橙色、加粗,并添加绿色边框

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
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
1
2
3
4
5
6
[id="red1"]~p{
width: 280px;
color: orange;
font-weight: bolder;
outline: forestgreen outset 5px;
}

效果如下:

伪类选择器

伪类选择器可以根据元素的状态或者元素的某种结构来选择元素。

根据上述介绍可以将伪类选择器分为两类:

  • UI伪类选择器
  • 结构伪类选择器

下面来逐一介绍。

UI伪类选择器

  • link:链接等待用户点击的状态
  • visited:用户此前已经点击过链接
  • hover:用户鼠标悬停在链接上
  • focus:链接拥有焦点的时候
  • active:链接正在被点击(鼠标在元素上按下,还没有被释放)

注意:如果链接拥有上述多种状态设置时,必须按照“LVHFA”的顺序定义选择器,否则会失效。

示例:以百度链接为例实现如下效果:

  • 当未访问过时字体为蓝色
  • 当鼠标悬停在链接上方时为灰色
  • 当鼠标点击不释放时为红色
  • 当链接拥有焦点时为黄色
  • 当链接访问过时为紫色
1
2
3
<div>
<a href="https://www.baidu.com/">百度一下,你就知道</a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:link{
color: #2440b3;
}
a:visited{
color: #771cb2;
}
a:hover{
color: darkgrey;
}
a:focus{
color: gold;
}
a:active{
color: #ff0000;
}

效果如下:

一个元素在获得焦点时选择该元素

格式:

e:focus(其中e代表html中的任意元素)

示例:构建一个表单,当输入框获取到焦点时,样式改为:字体橙色、加粗,并添加绿色边框

1
2
3
4
5
<form action="#">
用户名:<input type="text" name="username">
密码:<input type="password" name="password">
<input type="submit" value="提交">
</form>
1
2
3
4
5
input:focus{
color: orange;
font-weight: bolder;
outline: forestgreen outset 5px;
}

效果如下:

这里要涉及锚点。当点击锚点链接时,选中被链接的元素。

格式:

#xx:target

示例:点击锚点链接,被链接的文本样式加粗

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
31
32
<div>
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
</div>

<a href="#para1">第一段</a>
<a href="#para2">第二段</a>
<a href="#para3">第三段</a>
1
2
3
4
5
6
7
8
9
#para1:target{
font-weight: bolder;
}
#para2:target{
font-weight: bolder;
}
#para3:target{
font-weight: bolder;
}

效果如下:

伪元素选择器

伪元素选择符可以根据元素中特殊位置选择元素。

结构伪类选择器

结构伪类根据元素所处的位置选择元素,通常用于序列型的元素,如列表。

选择列表的第一个元素

格式:

e:first-childe为列表元素)

示例:选择列表的第一个元素,将其文本样式修改为红色

1
2
3
4
5
6
7
8
9
10
<h1>结构伪类选择器</h1>

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
<li>第六项</li>
</ol>
1
2
3
li:first-child{
color: red;
}

效果如下:

选择列表的最后一个元素

格式:

e:last-childe为列表元素)

示例:选择列表的最后一个元素,将其文本样式修改为绿色、加粗

1
2
3
4
5
6
7
8
9
10
<h1>结构伪类选择器</h1>

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
<li>第六项</li>
</ol>
1
2
3
4
li:last-child{
color: green;
font-weight: bolder;
}

效果如下:

选择列表的指定位置元素

格式:

e:nth-child(n)e为列表元素,n为数字,即指定的列表项)

示例:选择列表的第四项元素,将其文本样式修改为蓝色、加粗

1
2
3
4
5
6
7
8
9
10
<h1>结构伪类选择器</h1>

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
<li>第六项</li>
</ol>
1
2
3
4
li:nth-child(4){
color: deepskyblue;
font-weight: bolder;
}

效果如下:

伪元素选择器

伪元素是指元素当中的某一个位置。伪元素选择器可以选择一个位置的元素或者是位置的相对空间

可以选择元素的第一个字符

格式:

e::first-letter(e为列表元素)

示例:选择每一行的第一个字,将其样式增大、加粗

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
<div>
<h2 class="title" id="title" title>面朝大海,春暖花开</h2>

<p class="author" id="author">海子</p>

<div class="para1" id="para1">
<p class="red" id="red1">从明天起,做一个幸福的人</p>
<p class="red" id="red2">喂马,劈柴,周游世界</p>
<p class="orange" id="orange1">从明天起,关心粮食和蔬菜</p>
<p class="orange" id="orange2">我有一所房子,面朝大海,春暖花开</p>
</div>
<br>
<div class="para2" id="para2">
<p class="yellow" id="yellow1">从明天起,和每一个亲人通信</p>
<p class="yellow" id="yellow2">告诉他们我的幸福</p>
<p class="green" id="green1">那幸福的闪电告诉我的</p>
<p class="green" id="green2">我将告诉每一个人</p>
</div>
<br>
<div class="para3" id="para3">
<p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
<p class="cyan" id="cyan2">陌生人,我也为你祝福</p>
<p class="blue" id="blue1">愿你有一个灿烂的前程</p>
<p class="blue" id="blue2">愿你有情人终成眷属</p>
<p class="purple" id="purple1">愿你在尘世获得幸福</p>
<p class="purple" id="purple2">我只愿面朝大海,春暖花开</p>
</div>
</div>
1
2
3
4
p::first-letter{
font-size: 18px;
font-weight: bolder;
}

效果如下:

选择元素的首行

格式:

e::first-line(e为列表元素)

示例:选择首行文字,将其样式设置为红色、斜体

1
2
3
4
5
6
7
8
<div>
<h1>CSS(层叠样式表)</h1>
<p>
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或<br>
XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,<br>
还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
</div>
1
2
3
4
p::first-line{
color: red;
font-style: italic;
}

效果如下:

可以选择元素的前面位置添加特殊内容

格式:

e::before(e为列表元素)

示例:在“25岁”前添加“年龄:”字样

1
2
3
<div>
<p id="age">25岁</p>
</div>
1
2
3
p#age::before{
content: "年龄: ";
}

效果如下:

可以选择元素的后面位置添加特殊内容

格式:

e::after(e为列表元素)

示例:在“身高:”后添加内容

1
2
3
<div>
<p id="height">身高:</p>
</div>
1
2
3
p#height::after{
content: "190cm";
}

效果如下:


后记

结束

(也许会再补充…)