CSS选择器优先级
（1）CSS选择器都有权重值，权重值越大优先级越高。
内联样式表的权重值最高，值为1000。
id选择器的权重值为100。
class选择器的权值为10。
类型（元素）选择器的优先级为1。
通配符选择器的优先级为0。
（2）当权值相等时，后定义的样式表要优于先定义的样式表。
（3）在同一组属性设置中表有**“!important"**规则的优先级最大。
后代选择器
CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个用空格符分隔的选择器，选择器中的空格是一种结合符。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
.ancestor {
width: 500px;
height: 300px;
}
.parent {
width: 300px;
height: 200px;
}
.child {
width: 200px;
height: 100px;
}
/*
定位的是 .ancestor 的后代为 div 的元素
* 后代选择器包含该元素中所有包裹的元素
*/
.ancestor div {
background-color: lightcoral;
}
</style>
</head>
<body>
<div>
this is ancestor.
<div>
this is parent.
<div>this is child.</div>
</div>
</div>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
44
子选择器
CSS子选择器指为某标签元素的子元素来定义其样式，这里的子元素仅指第一级后代元素。CSS子选择器使用了符号”大于号（>）“，即子结合符。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子级选择器</title>
<style>
.ancestor {
width: 500px;
height: 300px;
}
.parent {
width: 300px;
height: 200px;
}
.child {
width: 200px;
height: 100px;
}
/*
定位的是 .ancestor 的子级为 div 的元素
*/
.ancestor>div {
background-color: lightcoral;
}
</style>
</head>
<body>
<div>
this is ancestor.
<div>
this is parent.
<div>this is child.</div>
</div>
</div>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
相邻兄弟选择器
CSS相邻兄弟选择器指可选择紧接在另一元素后的元素，且二者有相同的父元素。相邻兄弟选择器使用”加号（+）“作为相邻兄弟结合符。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相邻兄弟选择器</title>
<style>
.ancestor {
width: 500px;
height: 300px;
}
.parent {
width: 300px;
height: 200px;
}
.child {
width: 200px;
height: 100px;
}
/* 定位的是 .child1 的后面相邻兄弟为 div 的元素 */
.child1+div {
background-color: lightcoral;
}
</style>
</head>
<body>
<div>
this is ancestor.
<div>
this is parent.
<div>this is child0.</div>
<div>this is child1.</div>
<div>this is child2.</div>
</div>
</div>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
普通兄弟选择器
CSS普通兄弟选择器指可选择紧接在另一元素后的所有元素，且二者有相同的父元素。普通兄弟选择器使用”波浪号（~）“作为普通兄弟结合符。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>普通兄弟选择器</title>
<style>
.ancestor {
width: 500px;
height: 300px;
}
.parent {
width: 300px;
height: 200px;
}
.child {
width: 200px;
height: 100px;
}
/* 定位的是 .child1 的后面兄弟为 div 的元素 */
.child1~div {
background-color: lightcoral;
}
</style>
</head>
<body>
<div>
this is ancestor.
<div>
this is parent.
<div>this is child0.</div>
<div>this is child1.</div>
<div>this is child2.</div>
<div>this is child3.</div>
</div>
</div>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
44
并集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
/* 要求为 <h1> ~ <h6> 元素的文本内容设置相同颜色 */
/* h1 {
color: lightcoral;
}
h2 {
color: lightcoral;
}
h3 {
color: lightcoral;
}
h4 {
color: lightcoral;
}
h5 {
color: lightcoral;
}
h6 {
color: lightcoral;
} */
/* 通过并集选择器进行改写 */
h1,
h2,
h3,
h4,
h5,
h6 {
color: lightcoral;
}
</style>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
</body>
</html>
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
交集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
p {
color: lightcoral;
}
.cls {
color: lightskyblue;
}
/* 交集选择器 */
p.cls {
color: magenta;
}
</style>
</head>
<body>
<p>18级启嘉班</p>
<p>19级启嘉班</p>
<p>20级启嘉班</p>
<div>启嘉网</div>
</body>
</html>
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
伪类选择器
用来表示定位元素的某种状态所显示的样式
语法: “:关键字”
例如 :hover
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
button:hover {
background-color: lightcoral;
}
</style>
</head>
<body>
<button>按钮</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
否定伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>否定伪类选择器</title>
<style>
.fancy {
text-shadow: 2px 2px 3px gold;
}
p:not(.fancy) {
color: green;
}
body :not(p) {
text-decoration: underline;
}
</style>
</head>
<body>
<p>我是一个段落。</p>
<p>我好看极了！</p>
<div>我不是一个段落。</div>
</body>
</html>
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
伪元素选择器
CSS 伪元素是添加到选择器的关键字，可用于设置所选元素的特定部分的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
.p1::first-line {
color: lightcoral;
}
.p2 span {
color: lightcoral;
}
</style>
</head>
<body>
<p>19级启嘉班Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, ratione at labore blanditiis
tempora
quibusdam, maxime veritatis, ex incidunt et aliquid. Hic incidunt tempore sit alias ullam ut numquam odio.</p>
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quod</span> aspernatur
repudiandae nisi ex
minus repellendus corrupti labore, iste dolores, accusamus aperiam quaerat reiciendis quia soluta corporis!
Temporibus, quia sapiente!</p>
</body>
</html>
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
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
before和after伪元素
在CSS中，**::before**创建一个伪元素，该元素是所选元素的第一个子元素。
在CSS中，**::after**创建一个伪元素，该元素是所选元素的最后一个子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>before和after伪元素</title>
<style>
p::before {
content: "♥";
}
p::after {
content: "♥";
}
</style>
</head>
<body>
<p>19级启嘉班</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
参考：:: before（：before）
参考：::after (:after)
first-letter伪元素
样式的第一行的第一个字母块级元素，但仅当没有被其它内容（例如图像或内联表）之前。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first-letter伪元素</title>
<style>
p::first-letter {
color: lightcoral;
}
</style>
</head>
<body>
<p>19级启嘉班</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
参考：:: first-letter（：first-letter）
selection伪元素
样式已经强调了用户（如点击和整个文本拖动鼠标）文档的一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selection伪元素</title>
<style>
p::selection {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum possimus ipsa dolores neque odit, blanditiis
accusantium libero nihil dolore porro facere, amet doloribus eum fuga. Delectus, dignissimos nam! Similique, harum?
</p>
</body>
</html>
————————————————
