如何查找当前页面使用了哪些 CSS 文件
我的页面上有很多 CSS 文件。但其中很多文件并没有被样式使用。是否可以确定哪些文件被页面使用，哪些文件不被页面使用。
I have a lot of CSS files on the page. But a lot of these files are not used by styles. Is it possible to determine which files are used by page and which not.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
使用 http://getfirebug.com/ 调试页面。
当查看 css 时，它将引用使用的样式表。
例如：
您可以从屏幕截图中看到，使用 Firebug 时，它以蓝色文本显示该页面正在使用
style.css样式表。在 Firebug 中沿着树向下工作，只需将鼠标悬停在元素上即可查看使用了哪些样式表。
Use http://getfirebug.com/ to debug the page.
When looking at the css it will reference which stylesheet is used.
For example:
You can see from the screenshot that when using Firebug it shows in the blue text that the page is using the
style.cssstylesheet.Work down the tree in Firebug and simply hover over your elements and see which stylesheets are used.
您可以使用 firebug ( http://getfirebug.com/ ) 进行调试。它将显示什么用途，并让您找到答案。
You can debug with firebug ( http://getfirebug.com/ ). It will show what is used for what and allows you to find out.
您可以做一件事：
在 Firefox 中打开网站
使用 firebug 指向您想要查看应用类的某个控件。
在 firebug 的 html 源代码中，您可以找到特定控件上应用的 css 类。
在您的 CSS 文件中查找这些类。
对网页的所有控件重复此过程。
现在您可以删除该网页上未使用的那些 CSS 文件。
谢谢。
You can do one thing :
open the website in Firefox
Use firebug to point some control on which you want to see the applied classes.
In the html source code in firebug , you can find the applied css classes on a particular control.
Find those classes in your CSS files.
Repeat this process for all the controls of the webpage.
Now you can remove those CSS files that are not used on that web page.
Thanks.
Chrome 59 中的新功能是覆盖率工具，可向您显示 CSS 和 JS 代码覆盖率。它将显示页面上使用的 CSS 文件的百分比。当您单击该文件时，它将显示使用了哪些样式以及未使用哪些样式。更多信息请参见：https://developers.google。 com/web/updates/2017/04/devtools-release-notes#coverage
New in Chrome 59 is the coverage tool that shows you CSS and JS code coverage. It'll show you what percentage of CSS files are used on a page. When you click on that file, it'll show you which styles are used and which ones aren't. More info here: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
在 Firefox 中使用 Web Developer Addon。
http://chrispederick.com/work/web-developer/
安装此插件后，转到 Firefox工具->网络开发人员-> CSS->查看CSS。
Use Web Developer Addon with firefox.
http://chrispederick.com/work/web-developer/
After installing this addon goto firefox tool->web developer -> css-> view css.
有很多方法可以查找页面正在使用哪些 CSS。
以下是其中的一些：
1) 如果您使用的是 Firefox，那么 Firebug 很有用。 http://getfirebug.com/
只需右键单击页面并使用“检查元素”选项
2) 如果您使用 IE，则 IE 中可以使用开发人员工具
3) 如果您使用 google chrome，那么您可以通过右键单击页面直接使用“检查元素”选项。
There are many ways to find which CSS are being used by page.
here are some of them:
1) if you are using firefox then firebug is useful to use. http://getfirebug.com/
just right click on page and use Inspect Element option
2) if you use IE,then Developer tools is available in IE
3) If you use google chrome,then u can directly use Inspect Element option by right clicking on page.
查找或访问当前页面使用的 CSS 文件的方式可能会因您使用的浏览器和/或操作系统而异。
在这里我将与您分享 打开Windows 和 Mac 操作系统中 Chrome、Firefox、Internet Explorer、Safari、Opera 的“控制台”面板（开发者工具）。
当您打开当前浏览器的控制台时，单击要检查的元素，在右侧您将有一个选项卡名称样式，如下所示：
正如你所看到的，图像有名称CSS 文件的名称（在此示例中名为“desktop_ltr.css”）
The way to find or access to CSS files are used for current page, could vary base on the Browser and/or Operating system you are using.
Here I am going to share with you Opening the “Console” panel (Developer Tool) of Chrome, Firefox, Internet Explorer, Safari, Opera in both Windows and Mac OS.
When you open the Console of the current browser, click on the element you want to inspect and on the right hand side you will have a tab name Styles as shows below:
As you can see the image has the name of the CSS file (in this example named "desktop_ltr.css")