chrome coverage面板直接标出未匹配任何元素的css规则，用于清理冗余样式；它仅反映当前视图下实际渲染情况，不检测伪类、媒体查询非触发状态及js动态添加的选择器。
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？
常见原因是选择器根本没匹配上——不是样式被覆盖，而是压根没进计算流程。比如：
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
-
.card .title写成了.card.title（少空格），Coverage 会标灰，Elements 面板里也看不到这条规则出现在 Styles 标签页 - 用了
[data-role="header"]，但 HTML 里写的是data-role='header'（单引号不影响），真正问题是属性值大小写不一致：data-role="Header"就不匹配 - Shadow DOM 内部的样式不会被主文档 Coverage 统计到，即使它在
<style></style>标签里；得单独打开 Shadow Root 节点，再开 Coverage 录制
Coverage 找出无效规则后，怎么验证删掉它是否安全？
别直接删。先做两件事：
- 在 Elements 面板里右键目标元素 → Break on > attribute modifications，然后刷新，看 JS 是否动态增删了 class 或属性，导致 Coverage 漏判
- 用 Console 执行
getComputedStyle(document.querySelector('.your-selector'))，如果返回空对象或无预期属性，说明该选择器确实未命中；如果返回了值，但 Coverage 标灰，大概率是该元素在 Coverage 录制期间尚未渲染（如懒加载区块） - 临时注释掉整段 CSS，在页面交互（点击、悬停、滚动）过程中观察是否有视觉异常；Coverage 不捕获运行时变化
比 Coverage 更准的替代方案：手动检查 computed 样式链
Coverage 是“广撒网”，Computed 面板才是“精准手术刀”。当 Coverage 提示某规则未使用，但你怀疑它本该生效，就该切到 Elements → 选中对应元素 → Computed 标签页 → 搜属性名（如 color）→ 看左侧列出的所有来源。如果连那条规则的名字都没出现，说明选择器语法错误或层级不匹配；如果出现了但带删除线，才是优先级问题。
容易被忽略的一点：@layer 会影响 Computed 中的排序逻辑。比如 @layer base { .text-red { color: red; } } 和 @layer theme { .text-red { color: blue; } }，即使 base 写在后面，theme 层级更高，Computed 里蓝色会排在上面且无删除线——Coverage 却可能把 base 标灰，让人误以为它完全没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
