层叠规则
同一属性有多条匹配声明时，浏览器按层叠算法裁决。首先看声明是否适用于目标元素，再比较来源和重要性、层叠层、特异性与出现顺序。不要一看到冲突就加 !important；先找出冲突发生在哪个阶段。
css
@layer reset, components, overrides;
@layer components {
.card { color: black; }
}
@layer overrides {
.muted { color: gray; }
}层叠层让作者可以预先组织样式优先级。层的顺序与选择器特异性是不同维度；一个低特异性的后层规则可以胜过高特异性的前层规则。用户样式、作者样式和浏览器默认样式也有不同来源，重要声明会改变比较顺序。
实验与练习
为同一元素写入外部、内部和行内规则，分别加入层、!important 和不同特异性。打开开发者工具的 Styles 面板，按层叠算法记录每条规则为何胜出或被划掉。
可运行微实验：从匹配到胜出
在一个页面中保留三个同名元素，给它们同时设置类型、类、属性和伪类规则。先在 Elements 的 Matched CSS Rules 记录“命中但未胜出”的声明，再只改变一个条件：元素增加类、属性值改变、祖先增加类或规则移入另一层。每次只记录匹配集合、特异性/层级和最终 computed value，避免把“选择器没命中”和“命中了但被覆盖”混为一谈。
html
<p class="notice" data-state="error">消息</p>
<style>p { color: gray } .notice { color: navy } [data-state="error"] { color: crimson }</style>常见错误
- 用
!important掩盖没有理解的来源或层顺序。 - 认为后写的规则总是胜出。
- 把层叠层和 DOM 层级混为一谈。
继续阅读
层叠进入特异性比较后，下一篇计算选择器的权重：特异性计算。
练习
- 用最小输入复现“层叠规则”的成功路径，并记录可观察结果。
- 改变一个时序、数据或宿主条件，解释结果为何变化。
- 删除清理、校验或降级分支，写出能证明缺陷的断言。