CSS 三大特性
CSS 三大特性
层叠性、继承性、优先级
CSS 层叠性
CSS 层叠性即 CSS 样式的叠加，多个样式中指定了同一属性时，以最后一个样式中的属性值为准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v28-CSS多背景图.html</title>
<style>
body {
background-color: #C5ECFF
}
div {
color: green;
font: 18px "Microsoft YaHei";
}
div {
color: red;
}
</style>
</head>
<body>
<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
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
CSS 继承性
- 父标签中的样式会对子标签生效，即继承性
- 可以被子标签继承的样式属性有：以
text-、font-、line-三者开头的属性，color属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v28-CSS多背景图.html</title>
<style>
body {
background-color: #C5ECFF
}
div {
color: red;
font: 18px "Microsoft YaHei";
}
</style>
</head>
<body>
<div>
<p>父标签的样式会对子标签生效——继承性</p>
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
CSS 优先级
优先级
定义 CSS 样式时，经常会出现两个或多个规则应用在同一个标签上，此时就存在优先级的问题：
- 继承样式的权重为 0 ， 即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为 0。也就是说，子元素定义的样式会覆盖继承的样式。
- 行内样式优先，应用 style 属性的元素，其行内样式的权重非常高，可以理解为大于 100，总之，它拥有比上面提高的选择器都大的优先级。
- 权重相同时，CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
- CSS 定义了一个 !important 命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important 都具有最大优先级。
CSS 特殊性（Specificity）
关于 CSS 权重，我们需要一套计算公式去计算，这就是 CSS Specificity, 我们称为 CSS 特性 或 非凡性。它是一个衡量 CSS 值优先级的一个标准，具体规范如下：
优先级 用一个四位的数字串来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
CnPeng： 直白的说就是，1 的位置越靠左，权重越大，优先级越高。
| 类别 | 优先级 |
|---|---|
| 标签选择器 | 0,0,0,1 |
| 类/伪类选择器 | 0,0,1,0 |
| id 选择器 | 0,1,0,0 |
| 行内样式选择器 (标签内直接定义 style) | 1,0,0,0 |
!important | ∞ 无穷大 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v28-CSS多背景图.html</title>
<style>
.c-blue {
/*类和伪类选择器的优先级相同，倒数第二，高于标签选择器*/
color: pink;
}
div {
/*标签选择器，优先级最低*/
color: red;
font: 18px "Microsoft YaHei";
}
#id-one {
/* id 选择器优先级高于类和伪类选择器 */
color: #00FF00;
}
div{
/*后缀 !important 的优先级最高*/
color: black !important;
}
</style>
</head>
<body>
<!-- style="color:orange" 表示行内样式，优先级排第二，次于 !important -->
<div class="c-blue" id="id-one" style="color: orange">CSS 优先级</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
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
权重叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v28-CSS多背景图.html</title>
<style>
li {
/* 权重系数为：0001*/
color: red;
}
ul li {
/*权重系数为 0001+0001=0002 ——权重叠加*/
color: green;
}
</style>
</head>
<body bgcolor="#C5ECFF">
<nav>
<ul>
<li>李白</li>
<li>杜甫</li>
<li>李贺</li>
</ul>
</nav>
</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
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
权重叠加示例：
| 选择器 | 叠加后的权重 | 说明 |
|---|---|---|
div ul li | 0,0,0,3 | |
.nav ul li | 0,0,1,2 | 0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2 |
a:hover | 0,0,0,1 | 0,0,0,1 + 0,0,1,0 = 0,0,1,1 |
.nav a | 0,0,1,1 | 0,0,1,0 + 0,0,0,1 = 0,0,1,1 |
#nav p | 0,1,0,1 | 0,1,0,1 + 0,0,0,1 = 0,1,0,1 |
注意:
- **权重叠加时，数位之间没有进制。如：
0,0,0,5+0,0,0,5=0,0,0,10, 而不是0,0,1,0。**也就是说， 10个 div 叠加后的权重并不会高于一个 类选择器。 - 继承的权重是 0
权重总结（自上往下优先级依次降低）
- 使用
!important声明的选择器 - 内嵌在标签中的
style声明样式 - ID 选择器
- 类选择器、伪类选择器、属性选择器、伪元素选择器
- 元素选择器（即 标签选择器）
- 通用选择器
- 同一类选择器遵循就近原则
- 权重是优先级的算法，叠加是优先级的表现。
继承的权重为 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v28-CSS多背景图.html</title>
<style>
li {
/*权重系数为 0001+0001=0002 ——权重叠加*/
color: green;
}
.nav-style{
color: red;
}
p {
color: pink;
}
</style>
</head>
<body bgcolor="#C5ECFF">
<nav class="nav-style">
<ul>
<li>继承的权重为0：li 会继承设置在 nav 上的样式，但因为继承的权重为0，
并且 li 设置了单独的样式，所以，li 中内容的颜色为 li 样式中设置的颜色。</li>
</ul>
</nav>
<p>
<a href="#">选择器继承</a>
</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
30
31
32
33
34
35
36
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
上次更新: 2025/02/26, 08:57:57