如何确定 CSS 选择器的优先级？

CSS选择器的优先级（也称为特指度，specificity）是一个机制，浏览器通过它决定当多个CSS规则应用到同一个元素上时，哪个规则最终生效。优先级主要根据选择器的权重计算得出。核心规则如下：

优先级的核心计算规则

1. 四数组表示法（A, B, C, D）
   • 优先级由一个四位数表示，计算方式：
     • A（为1分当存在内联样式时）：如果元素使用了内联样式（如style="..."），则A =1，否则A =0。
     • B（基于ID选择器）：统计ID选择器（如#idName）出现的个数。
     • C（基于类、属性和伪类）：统计类选择器（如.className）、属性选择器（如[attr="value"]）、伪类（如:hover）的总数。
     • D（基于标签和伪元素）：统计标签选择器（如div）、伪元素（如::before）的总数。
   • 每个部分的权重独立相加，不会进位成其他数字。
2. 常见的优先级顺序
   • 最高优先级到最低优先级依次为：

     !important声明 > 内联样式（A=1） > ID选择器（高B值） > 类选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器 > 通用选择器（*） > 继承的样式
     

     其中：

     • !important最高，但它不是常规的选择器一部分；使用时（如color: red !important;）覆盖所有其他声明，不推荐依赖它作为主策略。
     • 内联样式默认优先级高。
     • ID选择器权重优于类选择器等。

优先级计算示例

示例1：计算选择器的优先级。

/* 假设示例代码如下 */
<h1 id="header" class="title big">Headline</h1>

计算规则：

• #header.title { color: blue; }
  • B (1个ID，#header) = 1,
  • C (1个类，.title) = 1,
  • D=0（无标签选择器）,
  • A=0（无非内联）,
  • 优先级值: (0,1,1,0).

示例2：另一个竞争规则.

h1.big { color: green; }

• C (1个类，.big) = 1,
• D (1个标签，h1) = 1,
• 优先级值: (0,0,1,1).

高值优先级赢：(0,1,1,0) > (0,0,1,1)，所以 color: blue 生效。实践中:

#header.title { color: blue; }  /* 生效值更高 */ 
h1.big { color: green; }        /* 被覆盖 */

比较遵循左边优先原则：先比A，再B，其次C，最后D。

优先级的比较逻辑

• 从(A,B,C,D)组数据依次比较：
  • 左边数字高的优先；相等再向右移位（例如，先比A，同A再比B）。
  • 如果所有数字均同，规则表中靠后的规则生效（靠后定义优先覆盖靠前）。
• 继承权重为零，仅当直接选择器才参与权重计算。

注意点

• 选择器嵌套增加重量时权重累加，但不叠加到下一字段（值分别限制在4位内）。
• 最佳实践：优先用类选择器和简化样式维护代码。