应使用Chrome开发者工具的Elements面板定位被覆盖样式：先在Styles面板查看被划掉的规则及其来源，再通过Computed标签页确认标有【resolved】的实际生效值，最后按specificity权重和来源文件排查覆盖根源。
当你在浏览器中确认CSS文件已成功加载（Network面板显示200状态、Sources里能看到文件），但页面元素样式仍不符合预期，说明样式已被其他规则覆盖——这不是加载失败，而是层叠规则在起作用，必须用Elements面板精准定位真实生效的那一条。
快速定位被覆盖的样式来源
打开Chrome开发者工具（F12）→ 切换到Elements面板 → 用鼠标悬停或点击目标元素，使其在HTML树中高亮；右侧Styles面板会立刻列出所有匹配该元素的CSS规则。
重点看每条规则末尾的来源标识：如element.style（内联样式）、bootstrap.css:142（文件名+行号）、style.css:87。被划掉的规则就是被覆盖的，但划掉≠无效，它可能正被更高权重的规则压制。
直接点击被划掉规则旁的文件名链接，能跳转到对应源码位置，方便你回溯是哪一行在干扰。
立即学习“前端免费学习笔记（深入）”；
确认哪条样式真正生效
不要只盯着Styles面板——切换到Computed标签页，在顶部搜索框输入要查的属性名（比如color或margin-top），展开后找标有【resolved】的那一行，这才是浏览器最终采用的值。
点开【resolved】旁的小箭头，能直接跳转到定义该值的原始CSS规则，连带显示其specificity值（如0,1,1,2）和完整路径。这个值才是你该去改的地方。
如果resolved值来自element.style，说明是JS动态写入的内联样式，普通CSS几乎无法覆盖，得从JS逻辑入手或加!important临时验证。
排查覆盖根源的三步法
第一步：在Styles面板中，找到你写的那条规则（比如.header .logo { font-size: 24px; }），观察它是否被划掉；
第二步：如果被划掉，看旁边另一条没被划掉的同名属性（比如color: #333），记下它的specificity值和来源文件；
第三步：回到Sources面板，打开那个来源文件，定位到对应行，检查它是否用了【!important】、ID选择器或更深层的嵌套（如#nav .header .logo），这些都会压过你的规则。
注意：specificity是逐位比较的，0,2,0 > 0,1,1，哪怕只多一个类名，也足以翻盘。
临时禁用某条规则快速验证
在Styles面板中，找到疑似干扰的CSS声明（比如.navbar a { font-weight: 600 !important; }），取消勾选它前面的复选框——页面样式会立即刷新，若目标元素恢复正常，就坐实了它是元凶。
这比反复改代码再刷新快得多，且不会污染源文件。
方法一：右键某条规则 → 选择“Force element state”可强制激活:hover/:focus等伪类，方便调试交互态样式；
方法二：在Styles面板右上角点:hov按钮，勾选:hover，让纯CSS实现的悬浮菜单常驻显示，便于审查内部结构。
