在CSS样式开发中，当多个样式规则同时作用于同一个HTML元素时，浏览器需要判断哪条规则最终生效，这个判断依据就是CSS优先级。理解CSS优先级的计算规则，能帮助我们快速定位样式冲突问题，写出更可控的CSS代码。
什么是CSS优先级
CSS优先级是浏览器用来确定当多个CSS规则匹配到同一个元素时，哪条规则的样式会被最终应用的一套判定规则。它的核心逻辑是：优先级高的样式会覆盖优先级低的样式，优先级相同的样式则遵循就近原则，后定义的样式会覆盖先定义的样式。
我们可以用<strong>权重</strong>来量化CSS优先级，不同的选择器对应不同的权重值，通过计算选择器的总权重就能判断优先级高低。
CSS选择器的权重规则
CSS选择器的权重可以分为四个等级，从高到低依次是：
- 内联样式：直接写在HTML元素的style属性中的样式，权重最高，记为1000
- ID选择器：通过元素的id属性匹配的选择器，记为100
- 类选择器、属性选择器、伪类选择器：比如
.box、[type="text"]、:hover，记为10 - 元素选择器、伪元素选择器：比如
div、::before，记为1 - 通配符选择器
*、继承的样式：权重为0，优先级最低
权重计算示例
我们通过几个具体的选择器组合来计算权重：
| 选择器组合 | 权重计算 | 总权重 |
|---|---|---|
#header .nav li a | 1个ID(100) + 1个类(10) + 1个元素(1) + 1个元素(1) | 112 |
div.content p span | 1个元素(1) + 1个类(10) + 1个元素(1) + 1个元素(1) | 13 |
.btn:hover | 1个类(10) + 1个伪类(10) | 20 |
优先级计算的注意事项
权重不会进位
很多开发者会误以为10个类选择器的权重等于1个ID选择器，实际上权重计算不会进位，无论多少个低等级的选择器叠加，权重都不会超过高等级选择器的单个权重。比如11个类选择器的总权重是110，依然低于1个ID选择器的100吗？不对，这里要注意：权重是四位数值，分别对应内联、ID、类、元素，11个类选择器对应的是0,0,11,0，而1个ID是0,1,0,0，所以ID的优先级更高。
/* 权重：0,1,0,0 */
#box {
color: red;
}
/* 权重：0,0,11,0 11个类选择器 */
.class1.class2.class3.class4.class5.class6.class7.class8.class9.class10.class11 {
color: blue;
}
/* 最终#box的样式生效，文字为红色 */
important规则的优先级
如果在样式后添加!important，这条样式的优先级会被提升到最高，甚至超过内联样式。但是不建议过度使用!important，因为它会破坏优先级的自然规则，导致后续样式难以覆盖。
/* 内联样式：color: green */
/* 外部样式 */
.text {
color: red !important;
}
/* 最终文字颜色为红色，!important优先级高于内联样式 */
继承样式的权重为0
元素继承的父元素的样式，权重为0，只要该元素被定义了任意非继承的样式，都会覆盖继承的样式。
<div class="parent" style="color: red;">
<p class="child">这段文字是什么颜色？</p>
</div>
.child {
color: blue;
}
/* 最终文字为蓝色，child定义的样式覆盖了继承的parent的红色样式 */
实际开发中的优先级应用技巧
在实际开发中，我们可以遵循以下原则来减少优先级冲突：
- 尽量使用低优先级的选择器，比如优先用类选择器，少用ID选择器，避免权重过高难以覆盖
- 避免写过于复杂的选择器组合，选择器层级越深，权重计算越复杂，也越容易出现冲突
- 如果需要覆盖第三方组件的样式，不要直接用
!important，可以先提升选择器的权重，比如在原选择器基础上多添加一个父级类名
掌握CSS优先级的计算规则后，我们就能快速定位样式不生效的原因，比如检查是不是选择器权重不够，是不是被更高优先级的样式覆盖了，是不是继承了权重为0的样式等，大幅提升CSS调试的效率。