问题
I know it's easy to get the CSS that is applied to a single node in HTML, using tools like the Firebug extension for Firefox, etc.
But is there a way to see all the CSS that is in effect on an entire page, or a larger fragment of HTML?
Specifically, we are cleaning up our one extremely large CSS file into smaller modules and would like to find out what CSS is used on a certain page, so we can move all the non-used CSS to another module.
回答1:
Thank you all! These are the various solutions I've looked at now from your recommendations (collected here for people with the same problem):
Dust-Me Selectors (Firefox Add-on)
This does exactly what I need. Lists used and unused CSS selectors (for the current page, or the entire site, after spidering), and can dump both lists as CSV text. Great.
https://addons.mozilla.org/firefox/addon/5392/
CSS Usage (Firefox Add-on)
https://addons.mozilla.org/firefox/addon/10704/
WARI - Web Application Resource Inspector (Java tool)
Appears to only handle static code, not dynamically generated HTML as is present in most web applications that use ajax – which, unfortunately, makes it useless, at least for me
http://wari.konem.net/
CSS Redundancy Checker (Ruby script, requires Rubygems and Hpricot)
http://code.google.com/p/css-redundancy-checker/
TopStyle (Windows-only application, $79.95 (!!))
http://svanas.dynip.com/topstyle/
These are all cross-platform and free, except for TopStyle.
回答2:
As far as tools go, you could use the css usage plugin for firebug. It will analyze pages for used css.
Or were you looking for a way to do it more programmaticly?
回答3:
You can try Dust-Me Selectors, it's add-on for firefox, if you use firebug, as you stated, you may find useful CSS Usage.
来源：https://stackoverflow.com/questions/3564379/is-there-a-way-to-get-a-list-of-all-the-css-applied-to-a-html-fragment-or-page