CSS 选择器问题：选择器优先级与 specificity

当多个 CSS 规则指向同一个 HTML 元素时，浏览器需要决定应用哪一条样式。这个决策过程取决于“优先级”，也被称为“特异性”。掌握特异性计算规则，能精准解决样式不生效或被意外覆盖的问题。

理解特异性计算公式

特异性不是简单的十进制数字，而是一个由三部分组成的元组。我们可以将其表示为 $(A, B, C)$。

• $A$ (ID 分量)：选择器中包含的 ID 选择器数量。
• $B$ (类、属性、伪类分量)：选择器中包含的类选择器、属性选择器（如 [type="text"]）和伪类（如 :hover）的数量。
• $C$ (元素、伪元素分量)：选择器中包含的元素选择器（如 div、p）和伪元素（如 ::before）的数量。

比较规则是从左向右依次比较 $A$、$B$、$C$ 的值，数值大者获胜。例如，$(1, 0, 0)$ 永远大于 $(0, 10, 10)$，因为 $A$ 值（$1 > 0$）具有最高优先级。

分步计算选择器权重

按照以下步骤计算任意 CSS 选择器的特异性值。

1. 重置 计数器，将 $A, B, C$ 均设为 $0$。
2. 遍历 选择器的每一部分。
3. 统计 所有的 ID 选择器（如 #header），每发现一个，$A$ 值加 $1$。
4. 统计 所有的类选择器（如 .btn）、属性选择器（如 [disabled]）和伪类选择器（如 :nth-child(2)），每发现一个，$B$ 值加 $1$。
5. 统计 所有的元素选择器（如 div、span）和伪元素选择器（如 ::after），每发现一个，$C$ 值加 $1$。
6. 忽略 通配符选择器（*）和结合符（如空格、>、+），它们不影响特异性。
7. 组合 得到的最终三元组 $(A, B, C)$ 即为该选择器的特异性值。

常见选择器权重对比表

下表列出了常见选择器的特异性计算结果，按优先级从高到低排列。

处理特殊优先级规则

除了上述计算公式，还有两种特殊情况会改变优先级结果。

1. 内联样式

直接写在 HTML 标签 style 属性中的样式具有极高的优先级。它通常表示为 $(1, 0, 0, 0)$（注意这里是四位数，或者理解为比 ID 更高一级）。任何非 !important 的外部样式表或 <style> 标签中的规则都无法覆盖内联样式。

2. !important 标记

在 CSS 属性值末尾添加 !important 会打破常规的特异性计算。带有 !important 的声明会覆盖所有没有该标记的声明。注意：如果在同一优先级层级（如都有 !important 或都没有）下特异性相同，则后定义的规则（代码位置靠后的）会覆盖先定义的规则。

实战解决样式冲突

遇到样式不生效时，通过以下步骤定位并解决问题。

1. 打开 浏览器开发者工具（通常按 F12）。
2. 选中 出问题的 HTML 元素。
3. 查看 “Styles” 或“样式”面板，找到被应用的 CSS 规则。
4. 寻找 被划掉的属性，这表示该属性被其他规则覆盖了。
5. 观察 覆盖该属性的规则，记录其选择器。
6. 对比 自己编写的规则与覆盖规则的内联状态和特异性数值。
7. 提高 自定义选择器的特异性。可以通过添加 一个父级 ID、增加 一个类名，或者串联 多个类名（如 .button.primary）来实现。
8. 避免 随意使用 !important，除非是为了覆盖第三方库的内联样式或极高权重的选择器。

代码示例解析

观察以下 HTML 和 CSS 代码，分析 p 标签最终的颜色。

<div id="container" class="box">
  <p class="text">这段文字是什么颜色？</p>
</div>

/* 规则 1 */
#container .text {
  color: red;
}

/* 规则 2 */
div.box p {
  color: blue;
}

/* 规则 3 */
.text {
  color: green !important;
}

1. 计算 规则 1 的特异性：#container ($A=1$)，.text ($B=1$) $\rightarrow (1, 1, 0)$。
2. 计算 规则 2 的特异性：div ($C=1$)，.box ($B=1$)，p ($C=1$) $\rightarrow (0, 1, 2)$。
3. 比较 规则 1 和 规则 2：$A$ 值 $1 > 0$，规则 1 胜出，文字应为红色。
4. 检查 规则 3：包含 !important。
5. 结论：规则 3 覆盖了规则 1 和 2，尽管规则 3 的特异性仅为 $(0, 1, 0)$，最终文字显示为绿色。