如何查找当前页面使用了哪些 CSS 文件 [重复]答案

【问题标题】：How to find which CSS files are used for current page [duplicate]如何查找当前页面使用了哪些 CSS 文件 [重复]
【发布时间】：2011-12-06 18:31:23
【问题描述】：

我的页面上有很多 CSS 文件。但是很多这些文件并没有被样式使用。是否可以确定页面使用哪些文件，哪些不使用。

【问题讨论】：

标记为 dup 的两个问题是相关的，但两者的公认答案（DustMe 选择器）似乎不再处于开发阶段，并且不适用于最新版本的 Firefox。跨度>
是的，你是对的。非常感谢。 DustMe 很棒

标签： html css browser

【解决方案1】：

Chrome 59 中的新功能是覆盖率工具，可显示 CSS 和 JS 代码覆盖率。它会显示页面上使用的 CSS 文件的百分比。当您单击该文件时，它会向您显示使用了哪些样式，哪些未使用。更多信息在这里：https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

【讨论】：

【解决方案2】：

当前页面使用的查找或访问 CSS 文件的方式可能因您使用的浏览器和/或操作系统而异。

在这里，我将在 Windows 和 Mac OS 中与您分享 Chrome、Firefox、Internet Explorer、Safari、Opera 的 Opening the “Console” panel (Developer Tool)。

当您打开当前浏览器的控制台时，点击您要检查的元素，在右侧您将有一个标签名称Styles，如下所示：

如您所见，图像具有 CSS 文件的名称（在本例中名为 “desktop_ltr.css”）

【讨论】：

【解决方案3】：

有很多方法可以找到页面正在使用哪些 CSS。以下是其中一些：

1) 如果您使用的是 firefox，那么 firebug 很有用。 http://getfirebug.com/ 只需右键单击页面并使用检查元素选项

2) 如果你使用 IE，那么开发者工具在 IE 中是可用的

3) 如果你使用谷歌浏览器，那么你可以直接在页面上右键使用 Inspect Element 选项。

【讨论】：

【解决方案4】：

使用http://getfirebug.com/调试页面。

当查看 css 时，它将参考使用的样式表。

例如：

您可以从屏幕截图中看到，当使用 Firebug 时，它以蓝色文本显示该页面正在使用 style.css 样式表。

在 Firebug 中沿着树向下工作，只需将鼠标悬停在您的元素上，即可查看使用了哪些样式表。

【讨论】：

发现此问题的任何人请注意：Firebug 现在是 Firefox 控制台的一部分，而不是插件

【解决方案5】：

在 firefox 中使用 Web Developer Addon。 http://chrispederick.com/work/web-developer/

安装此插件后转到 firefox 工具->web 开发人员-> css-> 查看 css。

【讨论】：

【解决方案6】：

你可以做一件事：

在 Firefox 中打开网站
使用 firebug 指向您希望查看应用类的一些控件。
在firebug的html源码中，可以找到特定控件上应用的css类。
在您的 CSS 文件中查找这些类。
对网页的所有控件重复此过程。

现在您可以删除那些未在该网页上使用的 CSS 文件。

谢谢。

【讨论】：

【解决方案7】：

您可以使用 firebug (http://getfirebug.com/) 进行调试。它将显示什么用于什么，并让您找出答案。

【讨论】：