如何快速判断页面上正在使用CSS文件的哪些部分？

Question

我有一个应用于多个页面的大量CSS文件。我希望将其分解为一个常见的CSS文件和几个页面级CSS文件，因为它变得越来越难以使用。不幸的是，要说出究竟什么是常见的并不容易。我希望有一种方法可以快速查看给定页面上正在使用的行/选择器。有谁知道可以做到这一点的工具？我不想使用开发人员工具并逐个浏览DOM元素。我想查看CSS文件，看看未使用的选择器是否变灰或什么的。谢谢！

Answer 1

您至少可以在Chrome中使用开发人员工具中的审核标签。运行后，它会说明当前页面中没有使用哪些样式。

在此网站上测试：

Answer 2

对于Firefox，有一个名为CSS Usage的附加组件 - 可能也值得一看。