打开Chrome DevTools（F12）选中元素，在Styles面板中查找带删除线的声明即被覆盖规则，悬停可见覆盖来源；未被划掉却无效则可能未匹配或受all: unset/继承干扰；Computed面板显示最终生效值及来源。
怎么看哪条CSS规则被覆盖了
打开 Chrome DevTools（F12），选中目标元素，在右侧 Styles 面板里找带删除线（strikethrough）的声明——那就是被更高权重规则压掉的；悬停能看到提示 This rule was overridden by …，并标出来源文件和行号。Computed 面板则直接显示最终生效值及其来源。
常见误判点：
- 没被划掉但也不生效？可能是选择器根本没匹配上（比如写了
input:disabled却作用在button上） - 样式出现在
Styles里但值不对？检查是否被all: unset、UA 默认样式或继承值干扰 - 用了 Vue
<style scoped>或 React CSS Modules？真实 DOM 中 class 带哈希后缀（如.card[data-v-abc123]），你写的.card .title实际不匹配
怎么算准选择器权重而不是瞎猜
CSS 权重不是十进制加法，是四元组 (a,b,c,d) 逐位比较：内联样式数 / ID 数 / 类/属性/伪类数 / 元素/伪元素数。例如 form#search input[type="text"]:focus 是 (0,1,2,2)，而 .search-input:focus 是 (0,0,2,0)，前者赢。
关键陷阱：
立即学习“前端免费学习笔记（深入）”；
-
0,1,0,0（一个 ID）永远大于0,0,99,99（99 个 class） -
:is()和:where()不叠加权重，只取内部最高项 -
!important不参与这个计算，它是另一套“强制插队”机制 -
.parent > .child只匹配直接子元素，中间插了个<div>就失效
不用 !important 怎么提高优先级
优先级从高到低排列，推荐按顺序尝试：
- 提高子元素选择器权重：把
.child改成.parent .child或.parent > .child，明确限定上下文 - 利用更具体的父级结构：比如原样式是
.item p，想单独控制，就写section.content p.intro——多一个 class 就多 10 分权重 - 调整样式表加载顺序：确保自定义 CSS 在第三方库（如 Bootstrap、Ant Design）之后引入，同权重时后声明者胜出
注意：div#header.nav.active > ul li a:hover 这种堆砌型选择器维护成本高，ID 已够用，后面加一堆类反而增加混乱风险。
Shadow DOM 和框架隔离带来的意外失效
Shadow DOM 内部样式完全隔离，外部选择器根本无法穿透，必须在 shadow root 内定义；Vue 的 <style scoped> 或 React 的 CSS Modules 会自动加属性哈希，导致你写的 div .title 在真实 DOM 中根本不存在。
真正卡住的时候，别只盯着 CSS 文件，先 inspect 元素看它最终渲染出的 class 名和嵌套关系——很多“覆盖失效”其实是选择器压根没命中目标节点。
