优先级的基本原则

优先级由选择器的不同部分权重决定，按以下顺序从高到低：

1. 内联样式：写在元素上的 style 属性。
2. ID 选择器：使用 #id 的选择器。
3. 类、属性和伪类选择器：使用 .class、[attribute] 或 :hover 等。
4. 标签（元素）和伪元素选择器：例如 div、h1 和 ::before。
5. 通配符和继承：如 * 或继承而来的样式。

优先级权重计算

CSS 优先级用一个 4 位数字表示，格式为 (a, b, c, d)：

• a: 内联样式计为 1，其它为 0。
• b: ID 选择器的数量。
• c: 类、属性选择器和伪类的数量。
• d: 标签选择器和伪元素的数量。

示例：

/* 1. 内联样式 */
style="color: red"                  -> (1, 0, 0, 0)

/* 2. ID 选择器 */
#header                            -> (0, 1, 0, 0)

/* 3. 类和伪类选择器 */
.header                            -> (0, 0, 1, 0)
button:hover                       -> (0, 0, 2, 0)

/* 4. 标签和伪元素选择器 */
button                             -> (0, 0, 0, 1)
::before                           -> (0, 0, 0, 1)

/* 5. 通配符或继承 */
*                                  -> (0, 0, 0, 0)

优先级规则

1. 比较 (a, b, c, d)，从左到右逐级比较，值大的优先。
2. 如果优先级相同，后定义的样式会覆盖前面的样式（后写规则覆盖前写规则）。

示例：

/* 样式定义 */
div { color: blue; }          /* 优先级 (0, 0, 0, 1) */
p { color: green; }           /* 优先级 (0, 0, 0, 1) */
#main p { color: red; }       /* 优先级 (0, 1, 0, 1) */

/* HTML */
<div id="main">
  <p>Text</p>
</div>

/* 最终结果：文字为红色 */

!important 的特殊优先级

• 功能：!important 强制使样式优先。
• 规则：无论权重如何，!important 都会覆盖其他未加 !important 的样式。
• 冲突时：多个 !important 样式时，按权重比较，权重高者优先。

示例：

p { color: green !important; } /* 优先 */
div p { color: red; }          /* 被覆盖 */

优先级总结表

练习题

写出以下样式的优先级，并判断最终生效的颜色：

<style>
  p { color: blue; }            /* 优先级 (0, 0, 0, 1) */
  .text { color: green; }       /* 优先级 (0, 0, 1, 0) */
  #highlight { color: red; }    /* 优先级 (0, 1, 0, 0) */
</style>
<p id="highlight" class="text">Sample Text</p>

答案： 文字为红色，因为 ID 选择器的优先级最高。