从特定样式表中识别特定HTML页面中使用的所有CSS ID和类别？

我已被分配清理超过5,000行CSS的任务。在这个项目的开发过程中，我们基本上只是将类附加到这个庞大的CSS文件中。从特定样式表中识别特定HTML页面中使用的所有CSS ID和类别？

我负责根据他们的页面组织课程，然后将页面ID添加到他们，以使他们只能击中该页面。

但是，什么让这个单调乏味的是手动找出哪些类和ID在页面中，然后组织它们。

有没有办法将样式表中的所有类“转储”到仅仅在该页面上的文件或其他东西？

来源

2014-04-14 eveo

我很确定有一个工具可以告诉你一个样式表的哪些部分没有用于特定的页面（意思是剩下的将是什么）不记得名字了。 –

生成一个页面中使用的类和id的数组将很容易，但是使用它来确定哪些样式声明在使用听起来很困难。 –

不，只需要使用任何核心CSS的所有类和ID。所有通用CSS都在我的jQueryMobile.css中，我不需要它，只需要我在我的HTML页面中明确指出的指向特定css文件的类。我该怎么做？@KevinB – eveo

要获取正在使用的类/标识的数组，请遍历文档中的每个元素并填充数组。显然这不是很有效，但考虑到手头的任务，我怀疑这是一个问题。

var idArr = []; 
var classArr = []; 
[].forEach.call(document.querySelectorAll("*"), function(element){ 
    if (element.id && idArr.indexOf(element.id) == -1) { 
     idArr.push(element.id); 
    } 
    if (element.className) { 
     var tempClassArr = element.className.split(" "); 
     for (var i = 0; i < tempClassArr.length; i++) { 
      if (classArr.indexOf(tempClassArr[i]) == -1) { 
       classArr.push(tempClassArr[i]); 
      } 
     } 
    } 
}); 
console.log(idArr); 
console.log(classArr);

http://jsfiddle.net/QLmNf/1/

这会给你的ID阵列和类的页面上的阵列。那么您需要将其与样式声明进行比较以找到匹配的样式声明。这当然不会削减使用这些id和类的声明，但实际上并不匹配页面上的任何元素，您可以使用@jordanforeman建议的审计选项卡来解决该问题。

来源

2014-04-14 18:47:40

虽然...我不明白为什么你甚至会需要这些数组，如果你可以使用审计选项卡的结果。它会给你一个未被使用的声明列表。如果您从工作表中删除了这些内容，则会留下正在使用的内容。 –

审计工具非常棒，但是，我希望它能告诉我什么是从特定样式表的页面上使用的。 – eveo

从特定样式表中识别特定HTML页面中使用的所有CSS ID和类别？

回答

相关问题