在CSS的世界里，“层叠”是其名称中最核心的部分，也是它最强大的逻辑体系。它并非指代“层叠样式表”中的视觉叠加效果，而是一套精密无比的仲裁机制。当多条样式规则同时指向同一个元素，并且声明了相互冲突的属性时，这套机制会冷静地做出裁决，决定最终哪条规则生效。

理解层叠，就是理解CSS如何解决样式冲突。其决策过程主要依据三个关键因素，按权重降序排列为：来源重要性 > 选择器特异性 > 代码顺序。

一、来源与重要性：最高权威的较量

首先，浏览器会审视样式的“出身”。不同来源的样式表具有不同的初始权重。

1. 用户代理样式：这是浏览器内置的默认样式。例如，<h1> 元素默认的粗体和大小就来源于此。它的权重最轻。

2. 用户样式：指网站用户通过浏览器设置的自定义样式（如为视力障碍用户设置的高对比度样式）。如今较少见，但理论上其权重高于用户代理样式。

3. 作者样式：这是我们作为网页开发者编写的CSS，是绝大部分样式的来源。

4. !important 声明：这是一个可以颠覆权重秩序的“王牌”。在任何来源的声明后加上 !important，都会将其提升到最高优先级。

   • 效果：一个在用户代理样式中标记了 !important 的声明，甚至可以覆盖我们在作者样式中编写的普通规则。同样，在作者样式中使用 !important 需要极其谨慎，因为它会使得后续的样式调整异常困难，通常被视为一把“双刃剑”或最后的手段。

效果体现：当你的精心设计被浏览器默认样式干扰，或需要强制覆盖某个第三方库的样式时，!important 能瞬间解决问题，但滥用会导致样式表难以维护。

二、选择器特异性：精准度的角逐

当样式来源的重要性相同时，浏览器会进入第二轮较量：计算选择器特异性。这是一套类似“计分卡”的机制，目标越明确的选择器，得分越高，权重也越大。

特异性通常用一个三位数（如0,1,0）来衡量，我们从左到右比较：

• 内联样式：在HTML元素的style属性中直接编写的样式。其特异性最高，计为 1,0,0。它能轻易覆盖外部或内部样式表中的大多数规则。

• ID选择器：每个ID选择器（如 #header）为特异性增加 0,1,0。因为一个页面中ID是唯一的，所以它指向的目标非常明确。

• 类选择器、属性选择器、伪类：每个类选择器（如 .button）、属性选择器（如 [type="text"]）或伪类（如 :hover）为特异性增加 0,0,1。

• 元素选择器、伪元素：每个元素选择器（如 div、p）或伪元素（如 ::before）为特异性增加 0,0,0,1（可以理解为最低位）。

效果体现：假设一个 <a> 元素，它同时被 a（元素选择器）和 .nav-link（类选择器）这两个选择器定义了颜色。由于类选择器的特异性（0,0,1）高于元素选择器（0,0,0,1），最终将显示 .nav-link 指定的颜色。这就是为什么你有时修改了CSS却看不到效果，很可能是被另一个特异性更高的选择器“压制”了。

三、代码顺序：最后的裁决者

当两条规则的来源重要性和选择器特异性完全相同时，层叠机制将诉诸于最后一位仲裁者：代码顺序。

• 效果：在CSS文件中，后出现的规则将覆盖先出现的规则。

效果体现：在链接样式时，我们通常将“重置样式表”或“基础框架”放在前面，将“主样式表”或“组件样式”放在后面。这样，当你在主样式表中对同一个元素使用相同特异性的选择器进行样式重定义时，后面的规则会自动覆盖前面的，从而实现定制化。同样，在同一个样式块内，后定义的属性值也会覆盖先定义的。

总结：层叠的流程与视觉世界的秩序

CSS层叠就像一个严谨的法官，其审判流程是：

1. 首先，看声明是否带 !important，这是最高法令。

2. 其次，看来源，作者样式通常优先于用户代理样式。

3. 然后，计算选择器特异性，如同比较证据的充分性，得分高者胜出。

4. 最后，看代码顺序，如同比较证据的提交时间，后者优先。

正是这套精密的层叠规则，确保了网页元素最终能以一种可预测的、一致的方式被渲染出来。它让基础的样式得以建立，让组件的样式得以强化，也让特定的交互状态（如 :hover）能够临时覆盖静态样式，从而构建出既有统一格调又充满动态细节的视觉世界。理解它，你就能从CSS的“试错”走向“掌控”。