CSS引入后如何快速定位无效样式，开发者工具Coverage分析

Chrome DevTools 的 Coverage 面板是快速识别和清理无效 CSS 选择器的利器——它能直观标出页面当前视图下完全未匹配任何元素的样式规则（整条规则“从头到尾没参与渲染”），大幅提升冗余样式排查效率；但需注意其局限性：不覆盖伪类交互态、媒体查询非激活分支、JS 动态注入的 class，也易误判 :is()/:where() 分支或 Shadow DOM 内样式；真正用好它，关键在于结合 Elements 面板验证选择器语法、Computed 面板精准追溯样式来源，并辅以 attribute 断点和 getComputedStyle 手动校验，避免误删本该生效的关键样式。

Chrome Coverage 面板能直接标出哪些 CSS 规则没被用到

Coverage（覆盖率）面板不是用来查“为什么样式不生效”，而是告诉你“哪些样式压根没参与渲染”——也就是整条 CSS 规则从头到尾都没匹配过任何元素。这对清理冗余样式、定位无效选择器特别快。

打开方式：DevTools → More Tools → Coverage → 点左上角录制按钮 → 刷新页面 → 停止录制。结果里会列出所有加载的 CSS 文件，每行标注「未使用字节数 / 总字节数」，点击文件可跳转到具体哪几行被标记为灰色（未使用）。

注意：Coverage 只反映当前页面视图下实际匹配情况。它不会检测:hover、:focus、@media 查询在非触发状态下的规则，也不会识别 JS 动态添加 class 后才生效的选择器。

• 如果某条 .btn-primary 规则显示 100% 未使用，先确认页面上真有带该 class 的元素；再检查是否被 JS 移除了 class，或 DOM 还没挂载完就录了 Coverage
• 响应式断点里的 @media (max-width: 768px) 内部规则，在桌面视口下默认标灰，属正常现象
• Coverage 对 :is()、:where() 中的部分分支也常误判为“未使用”，因为浏览器内部解析机制限制，需人工核对

为什么 Coverage 显示某条规则未使用，但元素明明有那个 class？

常见原因是选择器根本没匹配上——不是样式被覆盖，而是压根没进计算流程。比如：

• .card .title 写成了 .card.title（少空格），Coverage 会标灰，Elements 面板里也看不到这条规则出现在 Styles 标签页
• 用了 [data-role="header"]，但 HTML 里写的是 data-role='header'（单引号不影响），真正问题是属性值大小写不一致：data-role="Header" 就不匹配
• Shadow DOM 内部的样式不会被主文档 Coverage 统计到，即使它在