深入讲解 CSS 选择器权重及实战
1. 权重计算规则详解
CSS 选择器的优先级由 三元组 (x, y, z) 决定，比较规则如下：
| 选择器类型 | 权重值 (x, y, z) | 示例 |
|---|---|---|
| ID 选择器 | x + 1 | #header → (1,0,0) |
| 类/伪类/属性 | y + 1 | .active, :hover |
| 元素/伪元素 | z + 1 | div, ::before |
比较规则：从左到右逐级比较。例如 (1,0,0) > (0,10,10)（ID 优先级最高）。
2. 实战代码示例
示例 1：基础权重对比
<style>div { color: blue; } /* (0,0,1) */.title { color: green; } /* (0,1,0) */#title { color: red; } /* (1,0,0) */
</style><div class="title" id="title">Hello World</div>效果：文字为红色（ID 选择器权重最高）。
示例 2：复合选择器权重计算
<style>.container p { color: blue; } /* (0,1,1) */div p.special { color: green; } /* (0,1,2) */#main .content p { color: red; } /* (1,1,1) */
</style><div id="main" class="container"><div class="content"><p class="special">Text</p> <!-- 最终为红色 --></div>
</div>解析：
-
#main .content p→(1,1,1)（最高优先级） -
div p.special→(0,1,2) -
.container p→(0,1,1)
示例 3：伪类和伪元素的权重
<style>a:hover { color: purple; } /* (0,1,1) */.nav li::before { content: "★"; } /* (0,1,2) */#menu li.active { color: orange; } /* (1,1,1) */
</style><ul id="menu" class="nav"><li class="active">Item</li> <!-- 文字为橙色，★ 仍显示 -->
</ul>解析：
-
#menu li.active控制颜色（(1,1,1)）。 -
.nav li::before控制伪元素内容（独立作用）。
示例 4：!important 的核武器
<style>p { color: blue !important; } /* 强制最高 */#para { color: red; } /* (1,0,0) 无效 */
</style><p id="para">Important Text</p> <!-- 蓝色 -->注意：!important 会破坏权重规则，应尽量避免使用！
示例 5：属性选择器的权重
<style>input[type="text"] { border: 1px solid blue; } /* (0,1,1) */.form-input { border: 2px dashed green; } /* (0,1,0) */
</style><input type="text" class="form-input"> <!-- 蓝色实线边框 -->解析：属性选择器 [type="text"] 的权重 (0,1,1) > 类选择器 (0,1,0)。
3. 权重的常见误区
-
通配符
*的权重：
* { color: black; }的权重是(0,0,0)，低于所有其他选择器。 -
继承的样式：
继承的样式（如font-family）不参与权重计算，优先级最低。 -
源码顺序的作用：
权重相同时，后定义的样式生效：
p { color: red; }
p { color: blue; } /* 最终蓝色 */4. 关键知识点
-
优先级排序（从高到低）：
-
!important（强制最高，但避免滥用） -
行内样式（如
<div style="color: red;">） -
ID 选择器（
#id） -
类/伪类/属性选择器（
.class,:hover,[type="text"]） -
元素/伪元素选择器（
div,::before）
-
-
权重不进位：
(1, 0, 0)的优先级高于(0, 100, 100)（ID 选择器权重最大）。 -
相同权重时：
后定义的样式会覆盖前面的（源码顺序决定）。