一个由20行代码实现的CSS覆盖测试脚本

的document.stylesheets保存当前页面上的所有的CSS规则的集合。通过它，你可以遍历所有选择器在页面中定义，并访问selectortext属性获取选择器匹配规则。规则规则然后传递到document.queryselectorall得到页中的规则匹配的元素列表。
在这里我们只寻求CSS规则的覆盖，所以我们可以使用querySelectorAll（）。Length.By排序，你可以看到每个CSS的使用。
代码非常简单。

复制代码代码如下所示：
var使用；
无功表= document.stylesheets；

为sheets.length（var i = 1；我！= 1；i -）{
var规则=表{ }规则；

为rules.length（var j = 1；J！= 1；j -）{
var规则=规则{ }；
var text = rule.selectortext；

Usage.push（{姓名：文本、计数：document.queryselectorall（文本）。长度}）；
}
}
Usage.sort（功能（A，B）{ return a.count - b.count }）；

为usage.length（var i = 1；我！= 1；i -）{
console.log（选择器：+使用{ }姓名+ 。匹配号码：+使用量{计数）；
}

呼出F12，贴代码到控制台，回到车。

当然，由于权限的问题，CSS的外部导入不能无论如何访问，也暂时没有考虑。至于破IE不支持样式表，你可以考虑使用表达式或behaviour.htc试试另一天。
纯js实现在这里。将来，对外部CSS的分析用本地程序实现。

顺便说一下，测试结果是：

CSS什么都不用看：

当然，0匹配并不意味着它是无用的。最典型的例子是悬停，这只能通过移动鼠标，有控制的类名，属性= { }，#动态ID和动态元素的…等等都是不容易的比赛。

所以上面的代码没有什么意义，目前主流浏览器都有内置的配置文件功能，可以实时跟踪选择器匹配的数量，所以IE版本具有一定的意义。