层叠、优先级与覆盖顺序：为什么样式经常不按直觉生效

主题边界

CSS 的最终取值由来源、重要性、层叠层、选择器优先级和书写顺序共同决定。
只背 !important > id > class > tag 无法解释现代项目里的大多数覆盖问题。

机制与流程

浏览器先比较 author / user / user-agent 来源与 !important，再比较 cascade layer，再比较 specificity，最后看声明顺序。
:where() 的 specificity 为 0，:is() 和 :not() 取参数中最高的 specificity；这对设计系统选择器设计很重要。
内联样式优先级高，但仍会被 !important 规则覆盖。

关键差异

优先级是选择器层面的比较，层叠是更外层的决策系统。
CSS Modules、Scoped CSS、原子化 CSS 不是取消层叠，而是通过命名和注入顺序改变冲突表面。

边界条件

堆叠过深选择器会让覆盖链越来越难维护，并削弱组件样式的可移植性。
大量 !important 会把本应由结构设计解决的问题转成不可控覆盖战。

工程落点

大型项目应尽量把样式覆盖设计成层次化系统，例如 reset / token / component / utility，而不是到处提权。
排查样式失效时，要在 DevTools 中按 cascade trace 看是谁赢了，而不是只数选择器权重。

相关主题