博客站

CSS 的优先级决定了当多个规则应用于同一个元素时，哪个规则会生效。优先级通过选择器的特异性（Specificity）来计算，特异性越高，优先级越高。以下是优先级的计算规则：

特异性计算规则

特异性由四个部分组成，通常表示为 (a, b, c, d)：

1. 内联样式（a）：直接在 HTML 元素的 style 属性中定义的样式，特异性最高。
2. ID 选择器（b）：每个 ID 选择器增加特异性。
3. 类选择器、属性选择器、伪类（c）：每个类选择器、属性选择器或伪类增加特异性。
4. 元素选择器、伪元素（d）：每个元素选择器或伪元素增加特异性。

特异性比较规则

• 特异性值从左到右比较，先比较 a，再比较 b，依此类推。
• 如果两个选择器的特异性相同，后定义的样式会覆盖前面的样式。

示例

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

/* 特异性: (0, 0, 1, 0) */
.example {
    color: red;
}

/* 特异性: (0, 1, 0, 0) */
#header {
    color: green;
}

/* 特异性: (0, 1, 1, 1) */
#header p.example {
    color: yellow;
}

/* 特异性: (1, 0, 0, 0) */
<p style="color: purple;">这是一个内联样式的段落。</p>

优先级顺序

1. 内联样式（最高优先级）
2. ID 选择器
3. 类选择器、属性选择器、伪类
4. 元素选择器、伪元素（最低优先级）

特殊情况

• !important：在样式声明后添加 !important 可以覆盖所有其他规则，优先级最高。

  p {
      color: blue !important;
  }
  

  使用 !important 应谨慎，因为它会破坏样式表的层叠规则，增加维护难度。

总结

• 内联样式优先级最高。
• ID 选择器优先级高于类选择器和元素选择器。
• 类选择器、属性选择器、伪类优先级高于元素选择器和伪元素。
• !important 可以覆盖所有其他规则，但应谨慎使用。

通过理解这些规则，可以更好地控制 CSS 样式的应用顺序，确保网页的外观符合预期。