Coverage面板标红不等于可删，必须完整触发所有用户路径（如悬停:hover、调整窗口宽度激活@media、SPA路由切换后重录）并人工验证；启动需用Cmd/Ctrl+Shift+P输入Show Coverage，点击左上角“Reload and start recording”，不可只点红色圆点。
直接看结论：Coverage 面板能标出未参与样式计算的 CSS 行，但“标红”不等于“可删”——必须配合用户路径触发和人工验证，否则大量 :hover、@media、动态类名会被误判。
Chrome Coverage 面板怎么启动才有效
Coverage 不是常驻功能，也不会自动监听页面。常见失败是点了红色圆点却没刷新，或只录了首屏就停止。
- 用
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win/Linux）输入Show Coverage呼出面板，不能靠记忆快捷键 - 点击左上角带循环箭头的按钮
Reload and start recording，不是旁边孤立的红色圆点 - 若面板未出现，右键 DevTools 标题栏 →
Dock to bottom确保它在底部边栏可见 - SPA 项目切路由后必须再点一次
Reload and start recording，否则覆盖率数据仍沿用旧路由
为什么 :hover 和 @media 总显示红色
Coverage 判定的是“是否被浏览器实际计算过”，不是“是否存在”。桌面端没悬停，.btn:hover 就不会进样式计算流程；窗口宽度没缩到 @media (max-width: 768px) 范围内，整块规则恒为红色——这是准确反映，不是 bug。
-
:focus-within、:has()必须有对应 DOM 结构且被真实交互激活，Coverage 才会标记为绿色 - 响应式断点里的规则，在非匹配视口下标灰属正常，不能直接删
-
:is()和:where()中的部分分支常被误标为未使用，因浏览器内部解析限制，需人工核对选择器逻辑
如何定位某条 CSS 规则是否真冗余
文件级百分比（如 app.css 22% used）只是起点。真正要删的是行级未使用规则，且得排除“被覆盖”和“未渲染”两种假阳性。
- 在 Coverage 表格中点击 CSS 文件名（如
main.css），跳转到Sources面板，看每行左侧颜色条：绿色 = 至少匹配一个元素并参与计算；红色 = 整行未进入样式计算流程 - 鼠标悬停红色行，提示
This rule is not used；右键选Reveal in Styles pane，若右侧Styles面板完全不显示该规则，大概率可删；若显示但被划掉，说明被更高优先级样式覆盖，不是“未使用” - 执行
getComputedStyle(document.querySelector('.your-selector'))，返回空对象或无预期属性，说明选择器确实未命中；若返回了值但 Coverage 标灰，大概率是元素在录制期间尚未渲染（如懒加载区块） - 搜索框输入
-node_modules -dist过滤第三方包，避免把core-js或框架 runtime 误当冗余代码
最易被忽略的点是：Coverage 只管“是否计算”，不管“是否必要”。一个 @media (print) 规则在屏幕浏览时永远标红，但它可能在用户打印时至关重要——这种场景必须结合业务语义判断，工具给不了答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
