CSS样式覆盖常见原因分析

CSS样式“失效”并非代码错误，而是浏览器严格遵循层叠规则（权重四元组逐位比较、声明顺序、媒体查询位置等）作出的确定性选择；通过DevTools Styles面板中带删除线的样式及其悬停提示可快速定位覆盖来源，同时需警惕浏览器插件、动态插入样式、Shadow DOM结构等隐藏影响因素——真正高效的调试，始于精准观察而非盲目修改。

CSS样式被覆盖不是代码写错了，而是浏览器按权重和顺序做了确定性选择——你看到的“失效”，其实是它严格执行了规则。

怎么看哪条规则赢了？直接查 DevTools 的 Styles 面板

右键元素 → “检查”，在右侧 Styles 面板里找带删除线（strikethrough）的属性。被划掉的那条就是被覆盖的；没被划掉、但你又没看到效果的，可能是它根本没匹配上目标元素。

• 鼠标悬停在被划掉的样式上，会提示 This rule was overridden by …，并标出来源文件和行号
• 点右侧的文件名链接，能跳转到对应 CSS 源码位置
• 临时取消勾选某条规则左侧的复选框，观察样式是否恢复，可快速验证覆盖源
• 注意：浏览器插件（如 Dark Reader、Stylus）注入的样式也参与层叠，别漏查

权重不是加法，是四元组 (a,b,c,d) 逐位比较

比如 div#main.content:hover 的权重是 (0,1,2,1)，而 .sidebar ul li a 是 (0,0,1,4) —— 前者胜出，尽管后者用了更多标签名。比较时先看 ID 个数（b），b 相等再比类/伪类个数（c），依此类推，不进位、不相加。

• a：内联样式数量（style="..."）→ 每个计 1
• b：ID 选择器个数（如 #header）→ 每个计 1
• c：类、属性、伪类个数（如 .btn、[type="text"]、:hover）→ 每个计 1
• d：标签名、伪元素个数（如 div、::before）→ 每个计 1

@media 媒体查询为啥不生效？大概率顺序反了

媒体查询本身不改变选择器权重，只限定生效条件。但它必须放在基础样式之后，否则会被同权重的基础规则覆盖。

• ❌ 错误写法：@media 块写在 .title { font-size: 24px; } 前面 → 小屏下仍显示 24px
• ✅ 正确写法：基础样式在前，@media 在后 → 同权重时后声明者胜出
• 动态插入的