CSS - 5、选择器优先级

在CSS中，选择器的优先级决定了当多个样式规则冲突时，哪一个规则会被应用到HTML元素上。理解选择器的优先级对于编写可维护和高效的CSS代码至关重要。以下是选择器优先级的详细规则和计算方法。

---

CSS选择器优先级的总体规则

CSS选择器的优先级从高到低依次为：

1. 内联样式（Inline Styles）
2. ID选择器（ID Selectors）
3. 类选择器、属性选择器和伪类选择器（Class, Attribute, and Pseudo-class Selectors）
4. 元素选择器和伪元素选择器（Element and Pseudo-element Selectors）
5. 通用选择器（Universal Selector）

此外，还有两个特殊情况：

• !important声明：优先级最高，可以覆盖其他所有样式规则。
• 来源优先级：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。

---

选择器优先级的计算方法

CSS选择器的优先级可以通过“特异性”（Specificity）来计算。特异性是一个基于选择器类型的权重系统，用于确定在冲突时哪个样式规则应该生效。

特异性计算规则

特异性由四个数字组成：(a, b, c, d)，分别对应：

• a：!important声明的数量（如果有!important，则优先级最高）。
• b：ID选择器的数量。
• c：类选择器、属性选择器和伪类选择器的数量。
• d：元素选择器和伪元素选择器的数量。

注意： 特异性是按位比较的，即先比较a，如果相同再比较b，依此类推。

---

示例

以下是一些选择器及其特异性的计算：

1. 内联样式：

   <div style="color: red;">
   

   • 特异性：(1, 0, 0, 0)，因为内联样式等同于!important。

2. ID选择器：

   #main {
       color: blue;
   }
   

   • 特异性：(0, 1, 0, 0)，因为包含一个ID选择器。

3. 类选择器、属性选择器和伪类选择器：

   .box {
       color: green;
   }
   

   [type="text"] {
       border: 1px solid black;
   }
   

   a:hover {
       text-decoration: none;
   }
   

   • 特异性：(0, 0, 1, 0)，因为每个选择器包含一个类、属性或伪类。

4. 元素选择器和伪元素选择器：

   div {
       background-color: yellow;
   }
   

   p::before {
       content: ">";
   }
   

   • 特异性：(0, 0, 0, 1)，因为每个选择器包含一个元素或伪元素。

5. 通用选择器：

   * {
       margin: 0;
       padding: 0;
   }
   

   • 特异性：(0, 0, 0, 0)，因为通用选择器的特异性最低。

---

组合选择器的特异性

当使用组合选择器时，特异性是累加的。例如：

#main .box p {
    color: purple;
}

• 特异性计算：
  • #main：(0, 1, 0, 0)
  • .box：(0, 0, 1, 0)
  • p：(0, 0, 0, 1)
• 总特异性：(0, 1, 1, 1)

---

优先级冲突示例

假设我们有以下HTML和CSS代码：

<div id="main" class="box" style="color: red;">
    这是一段文本
</div>

#main {
    color: blue; /* 特异性：(0, 1, 0, 0) */
}

.box {
    color: green; /* 特异性：(0, 0, 1, 0) */
}

div {
    color: yellow; /* 特异性：(0, 0, 0, 1) */
}

优先级分析：

1. 内联样式：color: red;（特异性：(1, 0, 0, 0)）
2. ID选择器：#main { color: blue; }（特异性：(0, 1, 0, 0)）
3. 类选择器：.box { color: green; }（特异性：(0, 0, 1, 0)）
4. 元素选择器：div { color: yellow; }（特异性：(0, 0, 0, 1)）

最终，文本颜色为红色，因为内联样式的特异性最高。

---

特殊情况：!important

!important声明的优先级最高，可以覆盖其他所有样式规则。例如：

#main {
    color: blue !important; /* 特异性：(1, 1, 0, 0) */
}

.box {
    color: green; /* 特异性：(0, 0, 1, 0) */
}

即使.box的特异性低于#main，但由于#main使用了!important，最终颜色为蓝色。

注意： 尽量避免使用!important，因为它会破坏CSS的自然层叠规则，导致样式难以维护。

---

总结

CSS选择器的优先级由以下因素决定：

1. 特异性：通过选择器的类型（ID、类、元素等）计算特异性。
2. 来源优先级：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。
3. !important声明：优先级最高，但应谨慎使用。