样式被覆盖时，应先在DevTools Styles面板查看被划掉的声明及其来源；若显示为，多因CSS-in-JS或未开启sourceMap导致源码映射丢失，需结合Network面板与人工排查。
样式被覆盖却找不到来源行
浏览器开发者工具里看到某条样式明明写了却没生效，通常不是没加载，而是被后面更具体的规则覆盖了。在 Elements 面板中选中元素，右侧 Styles 标签页里，被划掉的声明就是被覆盖的；点击该声明左侧的小箭头，能直接跳转到它定义的位置——但这个位置可能是内联样式、 块，也可能是某个 CSS 文件里的某一行。
关键点在于：如果来源显示为 element.style，说明是 JS 动态设置的；如果显示为 styles.css:42，就去对应文件第 42 行看；但如果显示为 styles.css:1 或 CSSStyleSheet.insertRule() 动态注入，原始行号已丢失。
- 遇到
标签且不保留源映射 - Webpack/Vite 项目需确认
css.sourceMap已开启，否则 DevTools 无法映射到原始 SCSS/Less 文件 - 用
Ctrl+Shift+P（Cmd+Shift+P）打开命令菜单，输入 “Capture node screenshots” 或 “Show shorthand properties” 可辅助判断是否受缩写属性影响（比如margin覆盖了margin-top）
多个同名类名混用导致样式链混乱
当页面中同时存在 .btn、.Button、button--primary 等不同命名规范的类，DevTools 的 Styles 面板会把它们全列出来，但不会自动归类。你得手动点开每一条，看它来自哪个文件、是否带 !important、权重是否更高。
更麻烦的是 BEM 或 CSS Modules 生成的哈希类名（如 Header__title___2kX9z），在 Elements 面板里根本看不出语义，也没法快速反查组件。
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板右键元素 → “Break on” → “Attribute modifications”，可捕获 JS 是否动态增删了类名
- 用 Console 执行
getComputedStyle($0)（$0指当前选中元素），返回的是最终计算值，不含来源信息，但能验证是否真被覆盖 - 开启 DevTools 的 “Rendering” → “Paint flashing” ，可快速发现哪些区域因样式重绘频繁而卡顿，间接暴露冗余或冲突规则
import 或 @import 加载失败却不报错
CSS 文件路径写错、服务器返回 404、MIME 类型不对（比如返回 text/plain 而非 text/css），浏览器通常只在 Network 面板标红请求，但不会像 JS 那样抛 Uncaught Error。样式“消失”了，你可能还在 Elements 里反复检查规则，却没意识到文件根本没加载成功。
- 打开 Network 面板，过滤
css，看目标文件状态码是否为 200，Preview 是否显示正常 CSS 内容 - 检查响应头
Content-Type是否为text/css；若为application/octet-stream，Nginx/Apache 需补配置 -
@import在 CSS 文件中必须出现在最前面（除@charset外），否则整个规则会被忽略，且 DevTools 不提示 - Vite/Next.js 等现代工具链中，用
import './index.css'方式引入时，若路径错误，构建阶段可能静默跳过，务必检查终端是否有 warning
伪类和媒体查询断点失效难定位
:hover、:focus-visible、@media (min-width: 768px) 这类规则在默认状态下不可见，DevTools 不会主动展开。你得手动触发状态或切换设备尺寸，否则容易误判“样式没写上”。
- Elements 面板右上角有 :hov 按钮，勾选后可强制激活
:hover、:active等状态，方便调试 - Network 面板中禁用缓存（Disable cache）后，再刷新，避免旧 CSS 文件被缓存导致媒体查询未更新
- 用
window.matchMedia在 Console 中测试断点逻辑：matchMedia('(max-width: 767px)').matches返回布尔值，比肉眼缩放更准确 - 注意 Chrome 的“Responsive Design Mode”有时会伪造
window.innerWidth，但不触发 CSS 媒体查询重算，需手动 Ctrl+R 强刷
