层叠
层叠是CSS的一个基本特性，它的是指：解决声明冲突的这个过程（算法），并且只有CSS的属性值对 才会参与层叠的计算。这个过程是由浏览器自行处理的。
声明冲突：指的是同一个样式，多次应用到同一个元素
例：给a元素设置了一个color属性，同时，当a元素有actived这个选择器时，将它的color属性值改为绿色。此时就有了声明的冲突，color样式两次应用到了a元素上
<style>
a {color: red;}
.actived {color: green;}
</style>
<a href="">Lorem.</a>
<a href="" class="actived">Odit.</a>
<a href="">Magni.</a>
层叠计算的过程
1. 比较样式的重要性
重要性从高到低
- 作者样式表中的
!important样式。例：a {color: red !important;}。!important 要避免滥用，滥用会导致代码不好维护 - 作者样式表中的普通样式。例：
a {color: red;} - 浏览器默认样式表中的样式（用户代理样式表）
如果在此步骤中，冲突还未能的到解决，则进行下一步
2. 比较样式的特殊性
总体规则：
看选择器的选中范围，选中的范围（选中的元素个数）越窄越特殊
例：id选择器只能选中一个元素，而元素选择器可以选择同元素名的所有元素，因此id选择器比元素选择器更特殊。
具体规则（旧）：
通过选择器，计算出四个级别（a, b, c, d），每个级别用整数表示（也可以说是计算出一个4位数）
- a：如果是内联样式，记 1，否则记 0
- b：等于 该选择器中 所有 id选择器 的数量
- c：等于 该选择器中 所有 类选择器、属性选择器、伪类选择器 的数量
- d：等于 该选择器中 所有 元素（类型）选择器、伪元素选择器 的数量
最新规则（20250418更新）：
- 如果是内联样式，直接按最高级别处理
- a 等于 旧版的 b
- b 等于 旧版的 c
- c 等于 旧版的 d
- 忽略通配符
* {}
例：
<div id="content">
<ul id="nav">
<li id="item1" class="actived">1</li>
<li id="item2">2</li>
<li id="item3">3</li>
</ul>
</div>
li {
/* 0001 */
color: red;
}
div ul li {
/* 0003 */
color: green;
}
#content #nav li {
/* 0201 */
color: blue;
}
#content #nav li:first-child {
/* 0211 */
color: orange;
}
#content #nav .actived {
/* 0210 */
color: yellow;
}
如果比较之后，特殊性相同，进进行源次序的比较
3. 比较样式的源次序
很简单，就是代码书写靠后的会覆盖掉靠前的代码
作用
- 重置样式表。如：覆盖浏览器的默认样式。
重要性：作者样式表 > 浏览器默认样式表
常见的重置样式表：reset.css、normalize.css、meyer.css
- 爱恨法则
如：以下的这几个伪类选择器，需要按照a:link{} a:visited{} a:hover{} a:active{}的顺序去书写样式的代码顺序
补充信息
- 特殊性的规则，可以在浏览器中将鼠标hover到对应的选择器上尽心查看
- 一个网页中，一般会有以下几种CSS样式表：
- 浏览器给网页设置的默认样式表，统称用户代理样式表。（元素在网页中有默认显示效果的来源）
- 网页作者添加的CSS reset样式表。因为用户代理样式表可能存在不统一的情况，为了 减轻开发成本 以及 降低样式表运行所需的基本环境，所以会添加这个样式表。
- 网页的开发者根据网页的主题所编写的样式表，也是最常见的样式表。
- 浏览器的用户，使用自定义样式表定制使用体验。例：直接在浏览器上进行样式调试之类的。
2、3都是作者样式表，只是reset样式表通常设置了之后就不会去做修改。
