如何计算 CSS 选择器的优先级？

CSS 选择器的优先级用于确定浏览器应用哪种样式声明到一个元素上，规则基于选择器特定性（specificity）计算，以避免冲突。以下是详细的规则解析：

1. 特定性值表示
   优先级通过一个四元组 (A, B, C, D) 来表示：
   • A: 内联样式的标志（如果存在行内样式 style="property: value;"，则 A = 1；否则为 0）。
   • B: ID 选择器出现的次数（如 #id）。
   • C: 类选择器（.class）、属性选择器（[attr]）和伪类（:hover, :first-child）的总出现次数。
   • D: 类型选择器（标签名称如 div, p）和伪元素（::before, ::after）的总出现次数。
     例如：
   • 选择器 .nav .item: B=0 (no ID), C=2 (.nav and .item), D=0 (no elements) => (0,0,2,0)
   • 选择器 #main ul > li:hover: A=0, B=1 (#main), C=1 (:hover), D=2 (ul, li) => (0,1,1,2)
2. 计算与比较规则
   如果多个样式声明的相同属性作用于一个元素，比较规则从左到右：
   • 比较高位序参数，跳过相等者：
     ① 先比较 A；
     ② 如 A 相等比较 B；
     ③ 如 B 相等比较 C；
     ④ 如 C 相等比较 D。
   • 如果所有参数相同，后续声明的规则覆盖前面的。
     例如： a (0,0,0,1) vs .link (0,0,1,0) — 当应用到同一元素时：.link 优先于 a (因为 C:1 > D:1)，但真实比较时 C 高位优先。
3. 附加规则与例外
   • !important: 在任何声明中加 !important 可强制最高优先级（相当于权重无穷大），覆盖其他规则包括内联样式。
   • 内联样式优先级: 如果直接写于元素的 style 属性，优先级最高（A=1,000 in simplified system），相当于 (1,0,0,0)。
   • 特殊选择器优先级:
     • 通用选择器 *、通配符和继承规则：特定性均为 0，代表最低优先级（如 0,0,0,0）。
     • 后代和分组选择器：通过拆分成分选择器累加计算。
   • 冲突时避免出错：浏览器使用级联（cascade）确定优先级，参数值均相同时，最后加载的声明生效。

4. 权重计算表（常见错误概念，用于参考）
   权重数值常被误解为简化值（非正式参考，易用于记忆但不是精准标准）：

   Category	Weight value
   !important	∞ (无穷大)
   内联样式	1000
   ID 选择器	100 / each
   Class/Attr/Pseudo	10 / each
   Element/Pseudo-el	1 / each

   但这仅是一种指导方法，真实系统依据上述四组优先级而非实际数字。