不久前，我很确定我遇到了一个应用程序（或者可能是 Coda 的插件 - 我使用的 IDE），它可以快速解析一个 html 文档，然后吐出所有带有 ID 和类的元素我在 CSS 文件中使用。
已经完全“进入”禅宗编码 - 使用 Coda 的精彩 TEA 插件，我现在再次热衷于这个应用程序/插件。
我已经尝试过通过 Google 搜索但惨遭失败，但完全空手而归。
有谁知道有什么办法可以做到这一点？
大家新年快乐！
【问题讨论】：
标签： html css css-selectors emmet
我不知道您所说的工具，但您可以使用 SAX 轻松创建这样的工具。只需使用 startElement 回调来寻找“class”和“id”属性。
【讨论】：
这几乎就是我想要的……但恰恰相反 :)
【讨论】：
我想你正在寻找类似http://lab.xms.pl/css-generator/的东西
但是我必须警告你——像这样的工具只输出非常粗略的 DOM 图片，没有任何优化。没有任何自动化工具能比你做得更好，尤其是如果你在禅宗道路上。
愿 CSS3 与你同在。
【讨论】：
我知道这是从 2011 年开始的，几乎是 2013 年底，但我试图在 Google 上找到这个问题的答案，结果首页出现了指向这篇文章的链接。我无法快速找到获取所有类名或 ID 的方法。所以我写了下面这段 JavaScript。
function printAllElements() {
var all = document.getElementsByTagName("*");
var st = "";
for (var i = 0, max = all.length; i < max; i++) {
if(all[i].className !== ''){
st += all[i].className + "<br>";
}
if(all[i].id !== ''){
st += all[i].id + "<br>";
}
}
document.write(st);
}
我希望这对某人有所帮助并使此页面更有用。
【讨论】：
document 是什么，以及如有必要如何从存储为字符串的html 生成它。谢谢！
基于 Jon Petersen 的回答，这会获取所有 id 和类，将它们过滤为唯一的并准备输出，以便将其粘贴到您的 css 文件中。
function getAllCSS() {
var all = document.getElementsByTagName("*");
var st = [];
var trailing = " {<br /><br />}<br />";
for (var i = 0, max = all.length; i < max; i++) {
if (all[i].className !== '') {
st.push('.' + all[i].className + trailing);
}
if (all[i].id !== '') {
st.push('#' + all[i].id + trailing);
}
}
var unique = st.filter(function (item, i, ar) { return ar.indexOf(item) === i; });
document.write(unique.join("<br />"));
}
getAllCSS();
【讨论】：