blocks|key|1017899|text|嗯..。为此，我使用CSS文件的服务器端解析来提取各种CSS选择器，然后在浏览器中将它们作为jQuery选择器运行。不是很优雅，但应该行得通吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1017900|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Hmm.. I'd throw some brute force at this by extracting the various CSS selectors using a serverside parsing of the CSS file, then run each of these as a jQuery selector within the browser. Not very elegant, but should work?

blocks|key|803147|text|我以前用过Dust-Me选择器，这是一个Firefox插件。它非常容易使用和通用，因为它维护了一个跨多个页面的组合列表，其中使用了CSS值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|803148|缺点是我不能自动抓取整个网站，所以我最终只在我网站的关键页面/模板上使用它。尽管如此，它还是非常有用的。|803149|http://www.sitepoint.com/dustmeselectors/|offset|length|803150|https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/|803151|与上面的评论相反，Dust-Me选择器2.2与Firefox3.6兼容(我刚刚安装了它)。|803152|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|15|0|0|0|1T|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$F|W|G|X|1|Y]]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$F|10|G|11|1|12]]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|E]]|S|$5|O|P|Q|A|$R|I]]]]

I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.

The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.

<a href="http://www.sitepoint.com/dustmeselectors/" rel="nofollow noreferrer">http://www.sitepoint.com/dustmeselectors/</a>

<a href="https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/" rel="nofollow noreferrer">https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/</a>

Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).

blocks|key|1017973|text|这个火狐扩展可能会解决你的问题，Dust-Me+Selectors。还有一个叫CssCleaner或CssHelper的小桌面应用程序，但我找不到它的链接……(很久以前就把它下载到我的机器上，用于类似的任务)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1017974|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sitepoint.com/dustmeselectors/^0|G|H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This Firefox extension will probably solve your problem, <a href="http://www.sitepoint.com/dustmeselectors/" rel="nofollow">Dust-Me Selectors</a>. There's also a tiny desktop app called CssCleaner or CssHelper but I was unable to find a link to it... (just have it here at my machine downloaded a long time ago for a similar task)

blocks|key|1017998|text|以下是我使用JavaScript的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1017999|++++var+css+=+[];
++++for+(var+i=0;+i<document.styleSheets.length;+i%2B%2B)
++++{
++++++++var+sheet+=+document.styleSheets[i];
++++++++var+rules+=+('cssRules'+in+sheet)?+sheet.cssRules+:+sheet.rules;
++++++++if+(rules)
++++++++{
++++++++++++css.push('\n/*+Stylesheet+:+'%2B(sheet.href%7C%7C'[inline+styles]')%2B'+*/');
++++++++++++for+(var+j=0;+j<rules.length;+j%2B%2B)
++++++++++++{
++++++++++++++++var+rule+=+rules[j];
++++++++++++++++if+('cssText'+in+rule)
++++++++++++++++++++css.push(rule.cssText);
++++++++++++++++else
++++++++++++++++++++css.push(rule.selectorText%2B'+{\n'%2Brule.style.cssText%2B'\n}\n');
++++++++++++}
++++++++}
++++}
++++var+cssInline+=+css.join('\n')%2B'\n';|code-block|syntax|javascript|1018000|最后，cssInline是页面中所有电子表格及其内容的文本列表。|offset|length|style|CODE|1018001|示例：|1018002|++++/*+Stylesheet+:+http://example.com/cache/css/javascript.css+*/
++++.javascript+.de1,+.javascript+.de2+{+-webkit-user-select:+text;+padding:+0px+5px;+vertical-align:+top;+color:+rgb(0,+0,+0);+border-left-width:+1px;+border-left-style:+solid;+border-left-color:+rgb(204,+204,+204);+margin:+0px+0px+0px+-7px;+position:+relative;+background:+rgb(255,+255,+255);+}
++++.javascript+{+color:+rgb(172,+172,+172);+}
++++.javascript+.imp+{+font-weight:+bold;+color:+red;+}

++++/*+Stylesheet+:+http://example.com/i/main_master.css+*/
++++html+{+}
++++body+{+color:+rgb(24,+24,+24);+font-family:+'segoe+ui',+'trebuchet+MS',+'Lucida+Sans+Unicode',+'Lucida+Sans',+sans-serif;+font-size:+1em;+line-height:+1.5em;+margin:+0px;+padding:+0px;+background:+url(http://pastebin.com/i/bg.jpg);+}
++++a+{+color:+rgb(204,+0,+51);+text-decoration:+none;+}
++++a:hover+{+color:+rgb(153,+153,+153);+text-decoration:+none;+}
++++.icon24+{+height:+24px;+vertical-align:+middle;+width:+24px;+margin:+0px+4px+0px+10px;+}
++++#header+{+border-radius:+0px+0px+6px+6px;+color:+rgb(255,+255,+255);+background-color:+rgb(2,+56,+89);+}
++++#super_frame+{+min-width:+1100px;+width:+1200px;+margin:+0px+auto;+}
++++#monster_frame+{+-webkit-box-shadow:+rgb(204,+204,+204)+0px+0px+10px+5px;+box-shadow:+rgb(204,+204,+204)+0px+0px+10px+5px;+border-radius:+5px;+border:+1px+solid+rgb(204,+204,+204);+margin:+0px;+background-color:+rgb(255,+255,+255);+}
++++#header+a+{+color:+rgb(255,+255,+255);+}
++++#menu_2+{+height:+290px;+}

++++/*+Stylesheet+:+[inline+styles]+*/
++++.hidden+{+display:+none;+}|1018003|entityMap^0|0|0|3|9|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Here's my solution using JavaScript :

<pre class="lang-js prettyprint-override"><code> var css = [];
 for (var i=0; i&lt;document.styleSheets.length; i++)
 {
 var sheet = document.styleSheets[i];
 var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
 if (rules)
 {
 css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
 for (var j=0; j&lt;rules.length; j++)
 {
 var rule = rules[j];
 if ('cssText' in rule)
 css.push(rule.cssText);
 else
 css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
 }
 }
 }
 var cssInline = css.join('\n')+'\n';
</code></pre>

In the end, <code>cssInline</code> is a textual list of all the steelsheets of the page and their content.

Example :

<pre class="lang-css prettyprint-override"><code> /* Stylesheet : http://example.com/cache/css/javascript.css */
 .javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
 .javascript { color: rgb(172, 172, 172); }
 .javascript .imp { font-weight: bold; color: red; }

 /* Stylesheet : http://example.com/i/main_master.css */
 html { }
 body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
 a { color: rgb(204, 0, 51); text-decoration: none; }
 a:hover { color: rgb(153, 153, 153); text-decoration: none; }
 .icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
 #header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
 #super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
 #monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
 #header a { color: rgb(255, 255, 255); }
 #menu_2 { height: 290px; }

 /* Stylesheet : [inline styles] */
 .hidden { display: none; }
</code></pre>

blocks|key|803315|text|检查PurifyCSS，这适用于那些可以处理命令行界面或Gulp的人/Grunt/Webpack|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|803316|您可以从单个页面、多个页面或整个项目中删除未使用的样式，即使这些类是由javascript注入的。|803317|如果你能用谷歌搜索，有大量的资源可以让你了解PurifyCSS。|803318|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/purifycss/purifycss^0|2|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

Check for <a href="https://github.com/purifycss/purifycss" rel="nofollow noreferrer">PurifyCSS</a>, and this for those who can handle CLI or Gulp/Grunt/Webpack 

You can remove the unused style from single page or multiple page or from the entire project, even though the classes are being injected by javascript.

If you can google, there are tons of resources out there from which you can learn about PurifyCSS.

blocks|key|1018164|text|尝试使用这个工具，它只是一个简单的js脚本https://github.com/shashwatsahai/CSSExtractor/这个工具可以帮助从特定页面获取CSS，列出活动样式的所有源，并将其保存到源为关键字，规则为值的JSON中。它从href链接加载所有CSS，并告诉它们应用的所有样式。您可以使用任何名称将输出保存在JSON文件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1018165|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/shashwatsahai/CSSExtractor/^0|L|1A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Try using this tool,which is just a simple js script
<a href="https://github.com/shashwatsahai/CSSExtractor/" rel="nofollow noreferrer">https://github.com/shashwatsahai/CSSExtractor/</a>
This tool helps in getting the CSS from a specific page listing all sources for active styles and save it to a JSON with source as key and rules as value.
It loads all the CSS from the href links and tells all the styles applied from them.
You can save the output in a JSON file with any name.

blocks|key|1018324|text|您还可以使用http://getcssusedinapage.com来获取页面中使用的CSS。这是免费的，快速，并为您提供了许多细节，以及最小化和优化的CSS代码，您只需复制并粘贴到您的网站|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1018325|entityMap|0|LINK|mutability|MUTABLE|url|http://getcssusedinapage.com/^0|6|S|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can also use <a href="http://getcssusedinapage.com" rel="nofollow noreferrer">http://getcssusedinapage.com</a> to get the CSS used in a page. It's free, fast &amp; gives you back much details along with minimified &amp; optimized CSS code that you can just copy + paste in your website

Say you had a dynamically generated site that has been worked on by too many people, past and present, and you now have a collection of shared stylesheets that contain over 20,000 lines of CSS. It isn't organized at all, there are some class and id-based selectors but also way too many tag-based selectors. And then say you have 100 templates that use these styles, via some controller.

Is there a tool, something that works like Firebug perhaps, that you can point at a url and it would determine all of the applicable CSS selectors for that page and dump them to a file? Basically some way to rip apart the shared stylesheets on a page by page basis.

Extracting only the css used in a specific page

服务器

jQuery

JSON

假设您有一个动态生成的站点，过去和现在有太多的人在使用它，现在您有一个包含超过20,000行CSS的共享样式表的集合。它根本没有组织，有一些基于类和id的选择器，但也有太多基于标签的选择器。然后假设你有100个模板，通过一些控制器使用这些样式。有没有一个工具，它的工作原理可能像Firebug，你可以指向一个url，它可...

问仅提取特定页面中使用的css
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅提取特定页面中使用的cssEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅提取特定页面中使用的css
EN