在开发网页时，我们经常遇到一种情况：css选择器看起来完全正确，类名、标签名都没有拼错，元素也能在控制台中被选中，但设置的样式就是没有生效。这种现象通常不是选择器写错，而是选择器的权重不足，或者样式的层级关系被其他规则覆盖所导致的。
为什么选择器正确却无效
css有一套完整的优先级规则，浏览器会为每一条样式规则计算一个权重值，权重高的规则会覆盖权重低的规则。即便你的选择器能命中元素，只要另一条规则的权重更高，你的样式就不会起作用。
权重的基本顺序
- 行内样式，如 style 属性，权重最高
- id 选择器，如 #header
- 类选择器、属性选择器、伪类，如 .active、[type=text]、:hover
- 标签选择器和伪元素，如 div、::before
被覆盖的常见原因
除了权重之外，以下情况也会导致样式不生效：
- 后面书写的同等权重规则覆盖前面的规则
- 元素被多层父级样式影响，实际生效的是更具体的层级规则
- 使用了错误的作用域，例如样式被组件库或框架的样式隔离限制
如何检查权重与层级
最实用的办法是打开浏览器开发者工具，选中目标元素，在样式面板中观察哪一条规则被划掉。被划掉的样式通常会在旁边显示是被哪条更高权重的规则覆盖。
使用控制台对比权重
我们可以通过一段简单的代码来理解权重覆盖：
<style>
.box p {
color: blue;
}
p {
color: red;
}
</style>
<div class="box">
<p>这段文本会显示蓝色</p>
</div>
在上面例子中，.box p 是类加标签，权重高于单独的 p 标签选择器，因此文本显示为蓝色而不是红色。
提升权重的正确方式
如果确认是权重问题，可以通过增加选择器层级或使用更高权重的选择器来解决，而不是滥用行内样式：
/* 原样式权重不足 */
.list li {
padding: 10px;
}
/* 提高权重 */
.container .list li.item {
padding: 10px;
}
注意层级嵌套关系
有时候样式不生效并不是因为权重，而是因为 html 结构嵌套层级和预期不一致。比如你写了一个深层选择器，但实际 dom 中元素并没有被对应的父级包裹，这时选择器无法命中，自然也不会生效。
| 问题类型 | 排查方式 |
|---|---|
| 权重不够 | 看控制台哪条规则划掉当前样式 |
| 层级不对 | 检查 dom 结构是否和选择器匹配 |
| 顺序覆盖 | 调整同权重规则的书写位置 |
小结
当 css 样式不生效但选择器看似正确时，优先检查选择器的权重和实际的 dom 层级关系。借助开发者工具能快速定位是哪一条规则覆盖了你的样式。理解权重计算和层级匹配，是写出稳定 css 的关键。