选择器的优先级计算

在CSS中，样式规则的优先级决定了当多个规则作用于同一元素时，哪条规则会生效。理解选择器的优先级计算机制是解决样式冲突的关键。

优先级的基本概念

优先级由选择器的类型和数量决定，通常表示为四元组 (a, b, c, d)：

• a：是否使用内联样式（1或0）
• b：ID选择器的数量
• c：类选择器、属性选择器、伪类的数量
• d：元素选择器、伪元素的数量

比较时从左到右逐级对比，数值大的优先级更高。例如：

#header .nav li.active {}  /* 0,1,2,1 */
div#main .item a:hover {}  /* 0,1,2,2 */

选择器类型的优先级权重

不同类型的选择器具有不同的权重：

1. 内联样式：style=""，优先级最高（1,0,0,0）
2. ID选择器：如 #content（0,1,0,0）
3. 类/属性/伪类选择器：
   • .btn
   • [type="text"]
   • :hover （0,0,1,0）
4. 元素/伪元素选择器：
   • div
   • ::before （0,0,0,1）

通配符(*)、组合符(+, >, ~)和否定伪类(:not())不影响优先级，但:not()内部的选择器会参与计算。

优先级计算示例

/* 例1：0,0,0,1 */
p { color: blue; }

/* 例2：0,0,1,0 */
.text { color: red; }

/* 例3：0,1,0,0 */
#title { color: green; }

/* 例4：0,1,1,1 */
div#sidebar .menu li { color: yellow; }

/* 例5：1,0,0,0 */
<p style="color: purple">Hello</p>

当这些规则同时作用于一个元素时，生效顺序为：例5 > 例3 > 例4 > 例2 > 例1。

特殊规则与例外情况

!important 声明

会覆盖所有其他声明，包括内联样式：

p { color: red !important; }
#para { color: blue; }  /* 不会生效 */

相同优先级的处理

后定义的规则覆盖先定义的：

.btn { color: red; }
.btn { color: blue; }  /* 最终生效 */

继承的样式

继承的样式优先级最低，低于任何显式指定的选择器：

<style>
  div { color: green; }
  p { color: red; }  /* 这个生效 */
</style>
<div><p>文本</p></div>

复杂选择器的计算案例

分析一个多层嵌套的选择器：

/* 0,2,1,2 */
#main div#sidebar ul.list > li:first-child {}

/* 分解计算：
   - #main → 0,1,0,0
   - div#sidebar → 0,1,0,1
   - ul.list → 0,0,1,1
   - > li:first-child → 0,0,1,1
   合计：0,2,1,2
*/

避免优先级问题的实践建议

1. 减少ID选择器的使用：ID的高优先级会导致后续难以覆盖
2. 避免嵌套过深：如 .header ul li a {} 可简化为 .header-link {}
3. 慎用!important：除非处理第三方库样式
4. 利用CSS自定义属性：通过变量降低优先级依赖

:root {
  --primary-color: #3498db;
}
.btn {
  color: var(--primary-color);  /* 优先级仅为.btn */
}

浏览器开发者工具的应用

现代浏览器的检查器会显示优先级信息：

1. 在Chrome中右键选择"检查"
2. 查看"Styles"面板时：
   • 被覆盖的规则会显示删除线
   • 悬停选择器会显示优先级权重
   • 规则按优先级和定义顺序排列

选择器优先级的边界情况

伪类与伪元素的区别

li:nth-child(2) {}  /* 伪类: 0,0,1,1 */
li::before {}       /* 伪元素: 0,0,0,2 */

属性选择器的变体

[disabled] {}           /* 0,0,1,0 */
[type="submit"] {}      /* 同上 */
[class^="icon-"] {}     /* 同上 */

:where() 和 :is() 的特殊性

:where(.class) {}       /* 优先级总是0 */
:is(#id, .class) {}     /* 取参数中最高的优先级 */