面试题：如何计算 CSS 的优先级？

CSS 优先级（Specificity）是浏览器用来决定当多个规则作用于同一个元素时，哪个样式生效的机制。理解优先级对于解决样式冲突至关重要。

---

一、优先级计算规则

CSS 优先级由四部分组成，通常表示为一个 四位数：a, b, c, d

位	含义	权重
a	内联样式（style=""）的数量	1000
b	ID 选择器的数量	100
c	类选择器、属性选择器、伪类的数量	10
d	元素选择器、伪元素的数量	1

✅ 比较规则：从左到右逐位比较，高位优先，不进位。

---

二、具体示例解析

示例 1：

#header .nav li a:hover { color: red; }

• #header → 1 个 ID → b = 1
• .nav, [href], :hover → 2 个类/伪类 → c = 2
• li, a → 2 个元素 → d = 2
• 优先级：0,1,2,2

示例 2：

ul#menu li.active a { color: blue; }

• #menu → 1 个 ID → b = 1
• .active → 1 个类 → c = 1
• ul, li, a → 3 个元素 → d = 3
• 优先级：0,1,1,3

✅ 比较：0,1,2,2 > 0,1,1,3 → 第一个规则优先级更高。

示例 3：内联样式

<p style="color: green;">文本</p>

• 内联样式 → a = 1
• 优先级：1,0,0,0
• ⚠️ 几乎最高，极难被覆盖。

示例 4：通用选择器和继承

* { margin: 0; }           /* 优先级：0,0,0,0 */
p { color: black; }         /* 0,0,0,1 */

• * 选择器优先级最低。

---

三、特殊规则：!important

• !important 声明具有最高优先级，会覆盖其他所有规则（包括内联样式）。
• 语法：

p {
    color: red !important;
  }

• 优先级顺序：

1. !important（用户样式表）
2. !important（作者样式表）
3. 内联样式 + 正常声明
4. ID 选择器
5. 类/属性/伪类
6. 元素/伪元素
7. 继承样式
8. 浏览器默认样式

⚠️ 注意：!important 应谨慎使用，破坏层叠和可维护性。

---

四、优先级比较步骤

当多个规则冲突时，浏览器按以下顺序判断：

1. !important：有 !important 的规则优先。
2. 来源（Origin）：

• 用户样式表（带 !important）
• 作者样式表（你的 CSS，带 !important）
• 作者正常样式
• 用户正常样式
• 浏览器默认样式

• 优先级（Specificity）：按 a,b,c,d 四位数比较。
• 源顺序（Source Order）：如果优先级相同，后定义的规则胜出。

---

五、常见选择器优先级对照表

选择器	优先级
style="..."	1,0,0,0
#id	0,1,0,0
.class、[attr]、:hover	0,0,1,0
::before、::after	0,0,0,1
div、p、*	0,0,0,1 或 0,0,0,0
继承样式	无优先级（最低）

---

六、降低优先级的技巧

1. 避免过度嵌套：

/* ❌ 高优先级，难维护 */
   body div#main ul.nav li a { color: blue; }

   /* ✅ 低优先级，推荐 */
   .nav-link { color: blue; }

2. 使用类名代替 ID：

• ID 优先级过高，难以覆盖。

3. 避免 !important：

• 除非必要（如第三方库冲突），否则不用。

4. 利用源顺序：

• 将自定义样式放在最后加载。

---

七、总结

• 优先级公式：a,b,c,d → 内联, ID, 类/属性/伪类, 元素/伪元素。
• !important 最高，但慎用。
• 后定义的规则覆盖先定义的（同优先级时）。
• 继承样式优先级最低。
• 最佳实践：使用语义化类名，避免深层嵌套，合理组织 CSS 文件顺序。

掌握优先级，能让你更自信地编写和调试 CSS，避免“为什么我的样式不生效？”的困扰。