优先级如何计算
当两条规则作用于同一元素时，浏览器会选择更具体的那条。优先级以三个数字 (a, b, c) 计数：
- a — ID 选择器数量（#header）
- b — 类、属性（[type=text]）和伪类（:hover、:nth-child()）选择器数量
- c — 类型（div）和伪元素（::before）选择器数量
从左到右比较：(1,0,0) 胜过 (0,5,0)；(0,2,0) 胜过 (0,1,3)。通配选择器 *、组合器（> + ~）和 :where() 不计入任何权重。
现代选择器
- :is() / :has() — 取其中优先级最高的参数计数。
- :where() — 优先级始终为零（这正是它的超能力）。
- :not() / :is() / :has() — 取其中优先级最高的选择器列表计数（例如 :not(#x) 相当于增加一个 ID）。:nth-child() 等类似的 An+B 伪类按一个伪类计数。
- !important — 完全覆盖普通优先级；同等重要性时按源码顺序决定。
- 内联样式胜过任何选择器（!important 除外），不在此模型之内。
实用要点
如果某个样式「不生效」，几乎总是优先级的问题——你的另一条规则有更高的 (a,b,c)。计算器会显示这些数字，方便你决定：提高自己的权重（加一个 class 或 ID），或降低对方的权重（用 :where() 让外层选择器归零）。