CSS 层叠规则

优先级、来源和层叠层共同决定最终样式，先理解规则再解决样式冲突。

核心说明

CSS 层叠规则决定同一个元素的多个声明最终谁生效。判断样式冲突时，按来源与重要性、层叠层、选择器优先级、作用域接近程度和源码顺序依次比较，而不是简单地认为“写在后面的永远生效”。

关键点

• 同一层级中，!important、来源和层叠层会先影响胜负；普通作者样式不能只靠提高选择器复杂度解决所有问题。
• 选择器优先级通常按 ID、类/属性/伪类、元素/伪元素三个维度比较，例如 #app .title 会胜过 .title。
• 使用 @layer 可以明确重置、组件和工具类的顺序，比不断增加选择器权重更容易维护。
• 开发者工具的 Computed 和 Styles 面板可以显示被覆盖的声明以及具体来源，是排查冲突的第一入口。

@layer reset, components, utilities;

@layer components {
  .button { color: #123; }
}

@layer utilities {
  .text-blue { color: blue; }
}