CSS选择器优先级计算详解
一、优先级的基本概念
在CSS中，当多个样式规则同时作用于同一个HTML元素时，浏览器需要通过优先级计算来决定最终应用哪个样式。选择器优先级（Specificity）是浏览器判断样式规则生效顺序的核心依据，其本质是对不同类型选择器赋予不同权重，权重值高的规则会覆盖权重值低的规则。理解优先级计算规则，能有效避免样式冲突和调试困难，提升CSS代码的可维护性。
二、选择器类型与权重值
1. 内联样式（行内样式）
权重值：1000
直接写在HTML标签的style属性中，优先级最高。
<p style="color: red;">内联样式文本</p>2. ID选择器
权重值：100
以#开头，匹配元素的id属性值，每个页面中id应唯一。
#header { font-size: 20px; } /* 权重100 */3. 类选择器、伪类、属性选择器
权重值：10
- 类选择器：以
.开头，匹配元素的class属性 - 伪类：如
:hover、:active等 - 属性选择器：如
[type="text"]、[data-role="button"].active { color: blue; } /* 类选择器，权重10 */ a:hover { text-decoration: underline; } /* 伪类，权重10 */ input[type="text"] { border: 1px solid gray; } /* 属性选择器，权重10 */
4. 元素选择器、伪元素
权重值：1
- 元素选择器：如
p、div、span等标签名 - 伪元素：如
::before、::after、::first-line等p { margin: 10px; } /* 元素选择器，权重1 */ p::first-letter { font-size: 24px; } /* 伪元素，权重1 */
5. 通配符选择器
权重值：0
匹配所有元素，仅在无其他规则时生效。
* { margin: 0; padding: 0; } /* 通配符，权重0 */6. 组合选择器
权重值：各部分权重之和
组合选择器（后代、子、相邻兄弟等）的权重为各选择器权重的总和，而非乘积。
/* 后代选择器：div(1) + .class(10) + p(1) = 12 */
div .class p { color: black; }
/* 子选择器：ul(1) > li(1) = 2 */
ul > li { list-style: none; }三、优先级计算规则
1. 数值比较
优先级数值越大，规则越优先。
示例1：ID选择器 vs 类选择器
<div id="box" class="container">
<p>测试文本</p>
</div>#box p { color: red; } /* 权重：100 + 1 = 101 */
.container p { color: blue; } /* 权重：10 + 1 = 11 */结果：文本颜色为红色（101 > 11）。
2. 相同权重时的覆盖规则
若多个规则权重相同，后定义的规则会覆盖先定义的规则。
p { color: red; } /* 先定义，权重1 */
p { color: blue; } /* 后定义，权重1，覆盖前一条 */结果：文本颜色为蓝色。
3. !important声明的特殊性
!important可强制提升规则优先级，覆盖普通规则。
- 语法：
property: value !important; - 优先级：高于所有无
!important的规则，且不参与数值比较。
p { color: red !important; } /* 权重1 + !important（优先级无限高） */
.text { color: blue; } /* 权重10，无!important */结果：文本颜色为红色（!important覆盖普通规则）。
4. 继承样式的优先级
通过HTML继承的样式（如body的字体大小）权重为0，会被显式定义的规则覆盖。
body { font-size: 16px; } /* 继承样式，权重0 */
p { font-size: 14px; } /* 显式定义，权重1，覆盖继承 */四、常见误区与最佳实践
1. 组合选择器权重相乘的误区
错误：误认为后代选择器权重为各部分乘积（如div .class权重为1×10=10）。
正确：组合选择器权重为各部分之和（如div .class权重为1+10=11）。
2. 过度使用ID选择器
ID选择器权重过高（100），易导致后续样式难以覆盖。建议：
- 优先使用类选择器（10）实现复用
- 语义化HTML结构（如
<header>、<main>）减少ID依赖
/* 推荐：使用类选择器替代高权重ID */
.header { font-size: 20px; } /* 权重10，可灵活覆盖 */3. !important的滥用
!important会破坏样式层级关系，导致调试困难。建议：
- 仅在必要时使用（如第三方库样式覆盖）
- 通过提高选择器权重（如组合选择器）替代
!important
五、优先级计算实战
示例1：多选择器叠加
<div id="main" class="content">
<p class="text">测试文本</p>
</div>/* 计算各选择器权重：
- #main：100
- .content：10
- .text：10
- p：1
总权重：100 + 10 + 10 + 1 = 121
*/
#main .content .text p { color: green; }示例2：!important与普通规则冲突
p { color: red !important; } /* 权重：1 + !important */
p.text { color: blue; } /* 权重：10 */结果：文本颜色为红色（!important覆盖普通规则）。
六、总结
CSS选择器优先级计算的核心是权重数值比较，需掌握以下规则：
- 内联样式（1000）> ID选择器（100）> 类/伪类/属性选择器（10）> 元素/伪元素（1）> 通配符（0）
- 组合选择器权重为各部分之和，非乘积
!important覆盖普通规则，需谨慎使用- 继承样式权重为0，可被显式规则覆盖
合理运用优先级规则，能有效避免样式冲突，构建可维护的CSS架构。建议优先使用语义化选择器，减少高权重ID依赖，通过模块化设计提升代码复用性。
关键口诀：内联最高记1000，ID百点类伪十，元素伪元仅为一，通配继承零权重，重要规则破常规。
