吖昭的技术笔记《CSS 选择器优先级详解》
在 CSS 布局中，选择器优先级是前端开发者绕不开的 “坑”—— 明明写了样式却不生效，大概率是优先级被覆盖。理解选择器的权重计算规则，能避免 90% 的样式冲突问题。以下从权重计算方式到冲突解决办法，结合实战案例详解优先级逻辑，附优先级记忆口诀。
一、选择器权重的计算规则
CSS 选择器的优先级由权重值决定，权重值高的样式会覆盖权重值低的样式。权重值通过 “四元组”(a, b, c, d)表示，优先级从左到右依次递减，类似 “万位> 千位 > 百位 > 十位 > 个位” 的比较逻辑。
1. 不同选择器对应的权重值
|
选择器类型
|
权重组成 (a, b, c, d)
|
示例
|
|
!important 声明
|
(∞, 0, 0, 0)
|
color: red !important;
|
|
内联样式（style 属性）
|
(1, 0, 0, 0)
|
<div style="color: red">
|
|
ID 选择器
|
(0, 1, 0, 0)
|
#header { ... }
|
|
类选择器 / 伪类 / 属性选择器
|
(0, 0, 1, 0)
|
.active { ... }、:hover { ... }、[type="text"] { ... }
|
|
元素选择器 / 伪元素选择器
|
(0, 0, 0, 1)
|
div { ... }、::before { ... }
|
|
通配符 / 子选择器 / 相邻选择器
|
(0, 0, 0, 0)
|
* { ... }、div > p { ... }、h1 + p { ... }
|
计算规则：
- 比较四元组时从左到右依次比较，前一位数值大的优先级更高，无需看后续位。
- 例如：(0, 1, 2, 3) 大于 (0, 1, 1, 99)（因第三位 2>1）。
2. 复合选择器的权重计算
多个基础选择器组合时，权重值为各选择器权重之和：
/* 示例1：ID选择器 + 类选择器 + 元素选择器 */
#nav .item a {
/* 权重：(0,1,0,0) + (0,0,1,0) + (0,0,0,1) = (0,1,1,1) */
color: blue;
}
/* 示例2：类选择器 + 伪类 + 属性选择器 */
.user:hover [name="username"] {
/* 权重：(0,0,1,0) + (0,0,1,0) + (0,0,1,0) = (0,0,3,0) */
border: 1px solid red;
}
注意：权重值不会进位（如 10 个类选择器的权重(0,0,10,0)仍小于 1 个 ID 选择器(0,1,0,0)）。
二、优先级冲突的实战案例分析
1. 基础冲突：不同类型选择器的覆盖
<div id="box" class="
你必须 登录 才能发表评论.