CSS 选择器的优先级/层叠性

一. 简介

      CSS 选择器的优先级（也称为层叠顺序或特异性）决定了当多个规则应用于同一个元素时，哪个规则会被最终应用。优先级由高到低如下：

1. !important (最高优先级)

• 在属性值后面添加 !important 可以强制覆盖其他所有规则。
• 注意：应谨慎使用，因为它会使调试和维护变得困难，破坏了 CSS 的自然层叠。
• 示例：

  p {
    color: red !important;
  }

2. 内联样式 (Inline Styles)

• 直接写在 HTML 元素的 style 属性中的样式。
• 示例：

  <p style="color: blue;">这段文字是蓝色的</p>

3. ID 选择器

• 使用 # 定义的选择器。
• 示例：

  #myId {
    color: green;
  }

4. 类选择器 (Class)、属性选择器 (Attribute)、伪类 (Pseudo-classes)

• 这三者的优先级相同。
• 示例：

  .myClass { color: purple; }           /* 类选择器 */
  [type="text"] { width: 200px; }       /* 属性选择器 */
  a:hover { text-decoration: underline; } /* 伪类 */

5. 元素选择器 (Type)、伪元素 (Pseudo-elements)

• 使用 HTML 标签名的选择器和伪元素。
• 示例：

  p { font-size: 16px; }                /* 元素选择器 */
  ::before { content: ""; }             /* 伪元素 */

6. 通配符选择器、组合符、inherit、initial 等 (最低优先级)

• 包括 *、+、>、~、|| 等。
• 示例：

  * { margin: 0; padding: 0; }

二. 优先级计算（重点）

当优先级相同时，浏览器会通过计算“特异性”来决定。特异性通常用一个四元组表示：(a, b, c, d)

• a：内联样式的数量（style=""）→ 1000
• b：ID 选择器的数量 → 100
• c：类、属性、伪类选择器的数量 → 10
• d：元素、伪元素选择器的数量 → 1

注意：!important 不参与此计算，它直接最高。

1. 计算示例：

/* 选择器: #nav .list li.active */
/* ID: 1 → 100, 类: 2 → 20, 元素: 2 → 2 */
/* 特异性: (0, 1, 2, 2) = 122 */

/* 选择器: ul#menu li a:hover */
/* ID: 1 → 100, 类/伪类: 1 → 10, 元素: 3 → 3 */
/* 特异性: (0, 1, 1, 3) = 113 */

/* 结论：第一个选择器优先级更高 */

2. 案例

比如有html代码如下
<div>
    <a class="title"></a>
</div>

有css代码如下：
div a{
    font-size: 23px;
}
div a.title{
    font-size: 30px;
}

这两个font-size样式都作用于a标签，但是其中div a.title设置的字体样式font-size会生效，因为他的优先级高，覆盖了优先级低的font-size css属性。

⚠️ 重要规则总结：

1. !important > 内联样式 > ID > 类/属性/伪类 > 元素/伪元素
2. 特异性值越高，优先级越高。
3. 相同优先级时，后出现的规则胜出（后来者居上）。
4. 继承的样式优先级最低。