选择器优先级
理解权重计算和 specificity 规则
什么是选择器优先级？
CSS 选择器优先级（Specificity）决定了当多个规则应用于同一元素时，哪个规则会生效。理解优先级是掌握现代选择器的基础。
优先级通常用三位数表示：(ID数量, 类数量, 标签数量)。数值越大，优先级越高。
- ID 选择器 - 权重 100 (例如: #header)
- 类选择器、属性选择器、伪类 - 权重 10 (例如: .button, [type="text"], :hover)
- 标签选择器、伪元素 - 权重 1 (例如: div, ::before)
- 通配符、组合符 - 权重 0 (例如: *, >, +)
- !important - 覆盖所有优先级（应谨慎使用）
优先级计算规则
优先级计算遵循简单的加法规则。将选择器中的 ID、类和标签数量分别相加，得到三位数的权重值。
/* 权重计算公式：(ID数量, 类数量, 标签数量) */
/* 权重: (0, 0, 1) = 1 */
p { color: blue; }
/* 权重: (0, 1, 0) = 10 */
.text { color: green; }
/* 权重: (1, 0, 0) = 100 */
#title { color: red; }
/* 权重: (0, 1, 1) = 11 */
p.text { color: purple; }
/* 权重: (1, 1, 1) = 111 */
#title.text p { color: orange; }
/* 权重: (0, 2, 2) = 22 */
div.container p.highlight { color: teal; }
/* 权重: (2, 1, 0) = 210 */
#header #nav .menu { color: navy; }优先级不是十进制！(0, 1, 0) 不等于 10，而是表示"0个ID + 1个类 + 0个标签"。 11 个类选择器 (0, 11, 0) 也无法超过 1 个 ID 选择器 (1, 0, 0)。
权重对比示例
示例 1: 基础权重对比
标签选择器 (0,0,1)
类选择器 (0,1,1)
ID 选择器 (1,0,1)
/* 权重: (0, 0, 1) = 1 */
p { color: blue; }
/* 权重: (0, 1, 1) = 11 - 覆盖上面的规则 */
.text-class { color: green; }
/* 权重: (1, 0, 1) = 101 - 优先级最高 */
#text-id { color: red; }示例 2: 复杂选择器权重对比
/* 权重: (0, 1, 1) = 11 */
div.box {
background: lightblue;
color: darkblue;
}
/* 权重: (0, 2, 0) = 20 - 更高 ✓ */
.container .box {
background: lightgreen;
color: darkgreen;
}
/* 权重: (1, 0, 0) = 100 - 最高 ✓ */
#special-box {
background: lightcoral;
color: darkred;
}示例 3: 多个类选择器 vs ID 选择器
/* 权重: (0, 11, 1) = 0-11-1 */
.a.b.c.d.e.f.g.h.i.j.k {
background: lightblue;
color: darkblue;
}
/* 权重: (1, 0, 0) = 1-0-0 */
/* ID 选择器总是胜出！✓ */
#winner {
background: lightyellow;
color: darkorange;
}交互式优先级计算器
输入任意 CSS 选择器，实时计算其优先级权重。
!important 的作用
!important 会覆盖所有正常的优先级规则，应该谨慎使用。
示例：!important 覆盖高权重选择器
即使有高权重的 ID 和类选择器，!important 依然胜出 权重 (1,1,1) 被 !important 覆盖
/* 权重: (1, 1, 1) = 111 - 非常高 */
#very-specific-id.with-class {
color: blue;
background: lightblue;
}
/* 权重: (0, 0, 1) = 1 - 很低 */
/* 但是 !important 会覆盖上面的规则 ✓ */
p {
color: red !important;
background: lightcoral !important;
}- 避免滥用：!important 会破坏 CSS 的层叠规则，使代码难以维护
- 调试困难：过多使用会导致样式覆盖关系混乱
- 合理场景：覆盖第三方库样式、实用工具类（如 .hidden）
- 最佳实践：优先通过提高选择器优先级来解决样式冲突
浏览器兼容性
CSS 选择器优先级是 CSS 的基础特性，所有现代浏览器都完全支持。
| 浏览器 | 支持版本 | 状态 |
|---|---|---|
| Chrome | 所有版本 | ✓ 完全支持 |
| Firefox | 所有版本 | ✓ 完全支持 |
| Safari | 所有版本 | ✓ 完全支持 |
| Edge | 所有版本 | ✓ 完全支持 |