计算 CSS 优先级
约 520 字大约 2 分钟
2026-04-07
思考
如何计算 CSS 优先级？
CSS 优先级决定了当多个样式规则应用于同一元素时，哪个规则会生效。浏览器通过权重计算来裁决冲突。
计算规则：A-B-C 模型
优先级表示为 (A, B, C) 三个数字的组合，比较时从左到右逐位对比：
| 类别 | 选择器类型 | 权重值 |
|---|---|---|
| A | 行内样式 (style="...") | 1-0-0 (1000) |
| B | ID 选择器 (#app) | 0-1-0 (100) |
| C | 类/伪类/属性选择器 (.nav, :hover, [type="text"]) | 0-0-1 (10) |
| D | 元素/伪元素 (div, ::before) | 0-0-0-1 (1) |
通用选择器 (*)、组合符 (>, +, ~)、否定伪类 (:not()) | 0-0-0-0 (0) |
注意：:not() 本身不计分，但其内部的选择器正常计分。
计算示例
/* 0-0-1 → 1 分 */
p { color: red; }
/* 0-0-2 → 2 分 (胜过上面) */
div p { color: blue; }
/* 0-1-0 → 100 分 (胜过上面) */
#content { color: green; }
/* 0-1-1 → 101 分 (胜过上面) */
#content p { color: purple; }
/* 0-1-2 → 102 分 (胜过上面) */
div#content p { color: orange; }
/* 1-0-0-0 → 1000 分 (最高) */
/* <p style="color: black;"> */比较规则
1. 从左到右依次比较
从左到右依次比较,高位优先。 0-1-0 (100 分) > 0-0-99 (99 分)
2. !important 例外
p { color: red !important; } /* 最高优先级，几乎无法覆盖 */覆盖 !important 的唯一方法是另一个 !important 且优先级更高，或同优先级后定义。
3. 优先级相同 → 后定义胜出
p { color: red; } /* 先定义 */
p { color: blue; } /* 后定义胜出 → 蓝色 */4. 继承的样式优先级最低
继承自父元素的样式（如 color, font-size）优先级低于直接指定的样式，即使父元素用了 !important。
调试
在浏览器 DevTools 中查看 Elements → Styles：
- 被划掉的样式：优先级不足被覆盖
- 查看 Computed：显示最终生效的值及来源
- 将鼠标悬停在选择器上，可看到具体的权重计算
(a, b, c)