解密 CSS 选择器优先级：从青铜到王者的样式战争

一、前言：当样式开始「打架」

在 CSS 的世界里，每个前端开发者都经历过这样的噩梦：明明写了正确的样式，但页面元素却像叛逆期的孩子一样拒绝服从。这往往是因为我们低估了 CSS 选择器优先级（Specificity）的复杂性。本文将通过多个维度，带你掌握CSS的游戏规则。

二、优先级核心概念

CSS 优先级遵循严格的计算规则，我们可以将其拆解为四个层级：

2.1 优先级金字塔

1. !important（最高优先级）
2. 内联样式（1000）
3. ID选择器（0100）
4. 类/伪类/属性选择器（0010）
5. 元素/伪元素选择器（0001）

2.2 权重计算表

选择器类型	示例	权重值
!important	color: red !important;	∞
内联样式	style="color:red "	1000
ID	#header	0100
类/伪类/属性	.active, :hover	0010
元素/伪元素	div, ::before	0001
通配符/子选择器等	*, >	0000

2.3 举个例子

/* 选择器1: (0,0,0,1) */
a { color: red; }

/* 选择器2: (0,0,0,2) */
div a { color: green; }

/* 选择器3: (0,0,1,2) */
div a.more { color: pink; } 

三、特异性（Specificity）深度解析

3.1 四位权重计算法

每个选择器的特异性由四个数字组成：(a, b, c, d)

• a：内联样式存在则为1
• b：ID选择器数量
• c：类/属性/伪类数量
• d：元素/伪元素数量

计算示例：

#nav .list > li:hover { /* (0,1,2,1) */
    color: red;
}

3.2 优先级对比算法

比较规则：从左到右逐位比较

1. 比较a值，大者胜出
2. a相等则比较b值
3. 依次类推直到d值
4. 所有值相同则后定义者胜出

实战对比：

/* 选择器1: (0,1,1,3) */
div#main div.content p { color: blue; }

/* 选择器2: (0,0,3,0) */
.body .content .text { color: red; }

由于ID选择器的高权重，选择器1的蓝色最终胜出。

四、7大核心规则与实战

4.1 越具体越强大

<!-- HTML -->
<div class="box" id="special-box"></div>

/* 选择器1: (0,0,1,0) */
.box { background: gray; }

/* 选择器2: (0,1,0,1) */
div#special-box { background: red; } 

ID+元素的组合，碾压一个类的选择器

4.2 数量叠加的威力

/* 得分：(0,0,3,3) */
ul.nav li.active a:hover { ... }

4.3 !important的慎用

错误示范：

<!-- HTML -->
<div class="button new-button"></div>

.button { 
    color: blue !important;
}

.new-button {
    color: red !important; /* 引发!important军备竞赛 */
}

正确做法：

/* 通过提高特异性替代!important */
body .button.new-button {
    color: red;
}

4.4 同分情况的后发制人

.warning { color: orange; }
.alert { color: red; } /* 最后定义生效 */

4.5 属性选择器的真实权重

[type="text"] { /* 等效于类选择器 (0,0,1,0) */
    border: 1px solid #ccc;
}

4.6 伪类与伪元素的差异

/* 伪类 (0,0,1,1) */
li:first-child {}

/* 伪元素 (0,0,0,2) */
li::before {}

4.7 继承样式的卑微地位

<div class="parent">
    <p>继承的文字</p>
</div>

.parent { color: blue; }  /* 继承得分：0 */
p { color: black; }      /* 直接得分：1 */

五、开发者调试指南

5.1 Chrome DevTools 实战

1. 右键元素选择「检查」
2. 在 Styles 面板查看样式
3. 悬停选择器查看特异性分数

5.2 特异性计算工具推荐

• Specificity Calculator
• CSS Specificity Graph

六、总结

CSS选择器优先级看似简单，实则暗藏玄机。记住这三个核心原则：

1. ID > Class > Element
2. !important是双刃剑
3. 特异性可叠加但不可进位

随着CSS新特性的发展，:is ()、:where ()等伪类带来了特异性控制的革新，但基础规则仍然是前端工程师必须掌握的底层逻辑。建议在项目中建立统一的样式管理规范，避免优先级战争。