CSS特异性计算问题咨询：h1应显红色却显示蓝色

嘿，我完全懂这种困惑！明明按特异性计算应该是红色胜出，结果浏览器却显示蓝色，大概率是你忽略了CSS优先级里的这些容易踩坑的细节：

1. 被!important覆盖了 #

这是最容易忽略的点之一！如果另一个针对h1的规则（甚至是父元素的规则）加了!important，它会直接跳过特异性的计算，强制生效。比如：

/* 哪怕这个选择器特异性更低，但加了!important就会覆盖你的红色规则 */
p h1 { color: blue !important; }
h1 { color: red; }

2. 内联样式的优先级更高 #

如果你的h1标签里直接写了style属性，那它的特异性（权重是1,0,0,0）会比任何外部/内部样式表的选择器都高，除非你的红色规则也加了!important。比如：

<h1 style="color: blue;">标题</h1>

哪怕你写了h1 { color: red; }，也会被内联的蓝色覆盖。

3. 特异性计算错误 #

可能你对选择器的权重计算有误，比如把类选择器和元素选择器的权重搞混了。举个例子：

/* 这个选择器的权重是 0,1,1（1个类 + 1个元素） */
.container h1 { color: blue; }
/* 这个选择器权重是 0,0,1（仅元素选择器） */
h1 { color: red; }

这时候前者的特异性更高，所以蓝色会生效，如果你误以为两者权重相同，就会觉得结果不符合预期。

4. 规则顺序的影响 #

如果两个选择器的特异性完全相同，后面的规则会覆盖前面的。比如：

h1 { color: red; }
h1 { color: blue; } /* 这个会生效，因为它在后面 */

这种情况你可能没注意到代码里红色规则之后还有一个相同选择器的蓝色规则。

5. 选择器没有真正选中目标元素 #

比如你以为写的是针对h1的选择器，但实际是写错了——比如把h1写成了.h1（类选择器，但你的h1并没有这个类），或者是选择器嵌套错误，比如div h1但你的h1不在div里面，这时候你的红色规则根本没生效，浏览器用了其他能选中h1的蓝色规则。

6. 继承的样式干扰 #

虽然这种情况少见，但如果你的红色规则是继承自父元素（比如给body加了红色），而h1被直接选中的蓝色规则（哪怕是低特异性的元素选择器）覆盖了，因为直接选中元素的规则优先级高于继承的样式。比如：

body { color: red; } /* 这是继承给h1的 */
h1 { color: blue; } /* 直接选中h1，优先级更高 */

你可以打开浏览器的开发者工具（F12），选中h1元素，查看“Styles”面板，看看哪个规则被划掉了，哪个规则生效了——面板里会明确显示生效的规则以及被覆盖的原因，这是排查这类问题最快的方法！

内容的提问来源于stack exchange，提问作者Russell