被划掉的css规则表示被覆盖，悬停提示覆盖来源；未划掉却无效则多因选择器不匹配；computed面板显示最终生效值及来源，all: unset等重置属性易误判为覆盖。
Chrome DevTools里哪条规则被划掉，就说明被覆盖了
打开开发者工具（F12），选中目标元素，在右侧 Styles 面板里找带删除线（strikethrough）的声明——这就是被更高权重或后加载规则压掉的。悬停会提示 This rule was overridden by …，并标出来源文件和行号。
没被划掉但也不生效？那大概率是选择器压根没匹配上，不是被覆盖。
-
input:disabled写在样式里，却作用在button元素上 → 不匹配 - 写了
.btn-primary，但 HTML 里 class 是btn-primaryx或漏了空格 → 不匹配 - 用了
:is()或:where()，但内部选择器写错（比如:is(.a, .b)中.b实际不存在）→ 整个伪类可能不生效
Computed面板才是最终答案，别只看Styles
Styles 面板只显示“当前元素上所有声明过的规则”，而 Computed 面板才展示浏览器实际应用的值，以及它从哪条规则来、为什么是这个值。
重点看两处：
- 找到你要查的属性（比如
margin），点开右侧箭头，能看到所有参与计算的来源，带 ✅ 的是最终生效项 - 点击生效项旁的链接，能直接跳转到对应 CSS 文件和行号；如果来源显示
user agent stylesheet，说明是浏览器默认样式在起作用 - 若某属性在
Computed里完全没出现，说明它既没被声明，也没被继承 → 检查是否拼错属性名（如backgroud-color）
all: unset 和 inherit 容易误判为“被覆盖”
有些规则看起来没被划掉，值却不对，常见干扰源不是覆盖，而是重置或继承：
-
all: unset会清空所有可继承属性 + 所有非继承属性的初始值，之后再设color: red才有效；否则你写的color可能被unset吞掉了 - 父元素设了
font-size: 12px，子元素没设但显示 12px → 是继承来的，不是你写的规则生效了 - 某些 UA 样式（比如
input[type="number"]的appearance: textfield）优先级高于普通类选择器，且不会被划掉，但会压制你的padding
检查选择器是否真的命中目标元素
最隐蔽的问题：你以为选中了，其实没选中。DevTools 的 :hover / :focus 等伪类状态不会自动激活，得手动勾选才能测试。
- 右键元素 →
Force element state→ 勾选:hover，再看Styles里相关规则是否出现/生效 - 用
$0在 Console 里输出当前选中元素，然后运行getComputedStyle($0).margin，得到的是真实计算值，和Computed面板一致 - 临时加一条高亮规则，比如
* { outline: 1px solid red !important; }，确认你审查的真是目标节点，不是父容器或占位符
真正卡住的地方，往往不是权重算错，而是连选择器都没跑起来。先确认匹配，再谈覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
