html - 如何在 Google Chrome 中显示缺少的 CSS 类和属性？

Question

如何查看 Chrome 未找到/应用的 CSS 属性？ (如果有任何其他浏览器可以做到这一点，我觉得很好。Chrome 是我的首选。)

如果我有

  <div class="myClass">

我的 CSS 文件中没有 myClass，我希望 Chrome 记录错误或警告。

我知道元素检查器可以很好地手动查看单个元素。我想要可以扫描整个 DOM 并指出任何缺失的 CSS 的东西。

Answer 1

不存在“缺少 CSS 选择器”这样的事情，因为您可以将类和 ID 用于样式以外的其他目的。

但您可以检测未使用的 CSS 规则(正如 Berdiya Onur 所指出的)，您也可以反过来检测未被任何 CSS 规则使用的类和 ID。

您只需要创建一个 CSS 规则列表(您可以使用 document.styleSheets 实现)并与所有类和 ID 的列表进行比较(您可以使用 获得) document.querySelectorAll('*')).

在 Chrome 的 开发者工具 (F12) 中，转到 Audits 选项卡并运行 Web 性能测试。它还将显示哪些文件包含未使用的规则。

我在 jsbin 中完成了这一切(查看 JavaScript)。