如何计算 CSS 的优先级？

CSS 优先级（也称为特异性或Specificity）决定了当多个样式规则应用于同一个元素时，哪一个规则会生效。

计算 CSS 优先级的核心规则如下：

1. 优先级计算权重（特异性）

CSS 选择器的优先级通常用一个四位数的向量(a, b, c, d)来表示，数值越大，优先级越高。

• a (行内样式): 元素标签的style属性中的样式。
  • 例如：<div style="color: red;">
  • 权重：1, 0, 0, 0
• b (ID 选择器): 选择器中 ID 的数量。
  • 例如：#header,#nav #menu
  • 权重：0, 1, 0, 0(每个 ID 加 1)
• c (类、属性、伪类): 选择器中类选择器 (.class)、属性选择器 ([type="text"]) 和伪类 (:hover,:nth-child()) 的数量。
  • 例如：.btn,div.container,a:hover,[disabled]
  • 权重：0, 0, 1, 0(每个类/属性/伪类加 1)
  • 注意：伪元素（如::before,::after）算作 d 类，不计入 c。
• d (标签、伪元素): 选择器中标签选择器 (div,p) 和伪元素 (::before,::after) 的数量。
  • 例如：div,p::first-line
  • 权重：0, 0, 0, 1(每个标签/伪元素加 1)

通配符选择器 (*)、组合器 (+,>,~, 空格) 和:not()伪类本身不增加优先级（但:not()内部的参数会计算优先级）。

2. 计算示例

让我们计算几个选择器的优先级：

1. div

   • 1 个标签
   • 权重：(0, 0, 0, 1)

2. .container

   • 1 个类
   • 权重：(0, 0, 1, 0)

3. #main .box div

   • 1 个 ID (#main)
   • 1 个类 (.box)
   • 1 个标签 (div)
   • 权重：(0, 1, 1, 1)

4. div#header .nav-item:hover

   • 1 个 ID (#header)
   • 1 个类 (.nav-item)
   • 1 个伪类 (:hover)
   • 2 个标签 (div, 隐含在结构中，但这里只算显式的div) -> 实际上选择器是div#header(1标签) 和.nav-item:hover(0标签)
   • 修正：div#header(1标签, 1ID) +.nav-item:hover(1类, 1伪类)
   • 权重：(0, 1, 2, 1)

5. style="color: blue;"(行内样式)

   • 权重：(1, 0, 0, 0)

比较结果：
(1, 0, 0, 0) > (0, 1, 2, 1) > (0, 1, 1, 1) > (0, 0, 1, 0) > (0, 0, 0, 1)
即：行内样式 > ID 选择器 > 类选择器 > 标签选择器

3. 特殊情况：!important

!important是一个特殊的标记，它可以覆盖正常的优先级计算规则。

• 带有!important的声明优先级最高（除了行内样式中的!important）。
• 如果多个规则都有!important，则按照上述的优先级规则（特异性）进行比较。
• 建议：尽量避免使用!important，因为它会破坏 CSS 的层叠机制，使代码难以维护。只有在需要覆盖第三方库样式或处理极其复杂的特殊情况时才使用。

4. 优先级相同怎么办？

如果两个选择器的优先级（特异性）完全相同，那么后定义的样式会覆盖先定义的样式（即“后声明者优先”）。

/* 优先级相同 (0, 0, 1, 0) */.box{color:red;}.container{color:blue;}/* 如果元素同时匹配 .box 和 .container，颜色将是 blue，因为 .container 定义在后 */

总结口诀

1. 行内样式老大（权重最高）。
2. ID 选择器老二。
3. 类/属性/伪类老三。
4. 标签/伪元素老四。
5. 通配符/组合器不计分。
6. !important是外挂（慎用）。
7. 权重相同看先后（后写的生效）。

理解这些规则有助于你编写更清晰、可维护的 CSS 代码，避免样式冲突。