你是不是经常遇到这样的问题？明明写了CSS样式，但页面上显示的效果却不对。你检查了代码，没有拼写错误，但样式就是没生效。很多时候，这是因为你的样式被其他样式覆盖了。

要解决这个问题，你必须理解CSS的样式优先级。今天，我们就来彻底搞懂它。

什么是CSS样式优先级？

简单来说，当多个CSS规则同时作用于同一个HTML元素时，浏览器需要决定最终应用哪个样式。这个决定规则，就是样式优先级。

你可以把它想象成一场“比赛”。不同的选择器有不同的“权重分”。权重高的选择器，它的样式就会胜出，被应用到元素上。

计算权重的规则：特异性

CSS使用“特异性”来计算选择器的权重。特异性是一个由四个部分组成的值，可以写成 (a, b, c, d) 的形式。

我们来拆解一下：

1. 1. 内联样式 (a)：直接写在HTML元素 style 属性里的样式。它的 a 值为1，其他为0。例如：<div style="color: red;">。
2. 2. ID选择器 (b)：每个ID选择器（如 #header）会让 b 值加1。
3. 3. 类选择器、属性选择器、伪类 (c)：
• • 类选择器（如 .container）
• • 属性选择器（如 [type="text"]）
• • 伪类（如 :hover, :nth-child()）
• • 每出现一个，c 值加1。
4. 4. 元素选择器、伪元素 (d)：
• • 元素选择器（如 div, p）
• • 伪元素（如 ::before, ::after）
• • 每出现一个，d 值加1。

注意：通用选择器（*）、组合符（+, >, ~, 空格）和否定伪类（:not()）本身不增加特异性，但 :not() 内部的选择器会参与计算。

比较特异性时，从左到右比较 a, b, c, d 的值。a 大的胜出；如果 a 相同，则比较 b，以此类推。

权重计算示例

我们来看几个例子：

从表格可以看出，#nav .item:hover 的权重远高于 div p。所以如果它们冲突，前者的样式会生效。

一个重要的例外：!important

在CSS中，有一个“王牌”声明，叫做 !important。把它加在一条样式声明的末尾，可以大幅提高这条声明的优先级。

写法是这样的：

p {
  color: blue !important;
}

加了 !important 的声明，其优先级会高于所有没有加 !important 的普通声明，甚至包括内联样式。

但是，!important 之间也有较量。如果两条冲突的声明都加了 !important，那么它们会回到特异性规则的比拼，特异性高的胜出。

注意：!important 威力巨大，但请谨慎使用。滥用 !important 会导致你的样式表难以维护，形成“军备竞赛”，最终到处都是 !important，优先级规则反而失效了。

另一个规则：源代码顺序

当两个选择器的特异性完全相同时，最后一个出现的规则会胜出。这就是“后来者居上”原则。

看这个例子：

/* 规则1 */
p {
  color: red;
}

/* 规则2 */
p {
  color: blue;
}

两个选择器都是 p，特异性完全一样。因为规则2写在后面，所以段落文字最终会是蓝色。

优先级实战演练

让我们通过一个实际的HTML和CSS例子，来演练一下优先级是如何工作的。

假设我们有如下HTML结构：

<div id="app" class="container">
  <p class="text" id="special-text">这是一段测试文字。</p>
</div>

同时，我们有以下CSS：

/* 规则A: 特异性 (0,0,0,1) */
p {
  color: gray;
}

/* 规则B: 特异性 (0,0,1,1) */
.container p {
  color: green;
}

/* 规则C: 特异性 (0,0,1,0) */
.text {
  color: orange;
}

/* 规则D: 特异性 (0,1,0,1) */
#app p {
  color: blue;
}

/* 规则E: 特异性 (0,1,1,0) */
#special-text {
  color: red;
}

/* 规则F: 加了 !important */
.text {
  color: purple !important;
}

现在，我们来分析 <p> 标签的颜色会是什么。

1. 1. 首先，找出所有作用于这个 <p> 标签的规则。规则A、B、C、D、E、F都匹配。
2. 2. 比较它们的特异性（先不考虑 !important）：
• • 规则E #special-text： (0,1,0,0)
• • 规则D #app p： (0,1,0,1)
• • 规则B .container p： (0,0,1,1)
• • 规则C .text： (0,0,1,0)
• • 规则A p： (0,0,0,1)
3. 3. 按特异性从高到低排序：规则D > 规则E > 规则B > 规则C > 规则A。
• • 这里规则D的 b 和规则E的 b 都是1，但规则D多了一个 d，所以规则D特异性更高。
4. 4. 所以，如果没有 !important，应该应用规则D的 color: blue;。
5. 5. 但是，规则F !important 出现了。它打破了常规。规则F的特异性虽然只有 (0,0,1,0)，但它有 !important。
6. 6. 在所有 !important 声明中，规则F是唯一一个。因此，<p> 标签的最终颜色是 紫色 (purple)。

这个例子清晰地展示了特异性计算和 !important 的压倒性力量。

如何避免和解决样式冲突？

理解了规则，我们就能更好地避免问题。

1. 1. 保持选择器简洁：尽量避免使用过于复杂、特异性过高的选择器。多用类选择器（.class），它们有足够的特异性，又不会太高。
2. 2. 使用CSS方法论：像BEM（Block Element Modifier）这样的命名规范，能帮助你写出扁平化的、特异性均匀的CSS，从根本上减少冲突。
3. 3. 谨慎使用ID选择器和内联样式：它们特异性太高，一旦使用，后续想用普通类选择器覆盖会非常困难。
4. 4. 把 !important 当作最后手段：只在覆盖第三方库样式或处理紧急问题时使用。并且，最好加上注释说明原因。
5. 5. 利用源代码顺序：在编写CSS时，有意识地安排顺序。通常遵循“从一般到特殊”的原则，基础样式在前，特殊样式在后。

掌握CSS样式优先级，是前端开发的基本功。下次再遇到样式不生效，别急着抓狂，先冷静地分析一下选择器的特异性吧。