计算css文件中选择器的数量

关键词：

【中文标题】计算css文件中选择器的数量【英文标题】：Count number of selectors in a css file 【发布时间】：2011-07-10 20:25:49 【问题描述】：

是否有现有的插件/应用程序/程序/脚本/任何东西来分析和计算文件的 css 选择器？我想检查我的 css 文件在 IE 中不起作用的原因是否是因为我的选择器计数超过 4095（我很确定不是）

谢谢！

附言如果有 haml/sass/compass 解决方案，则加分

【问题讨论】：

选择器的数量是否是问题所在？如果不是，那是什么？我遇到了同样的问题。突然间 IE9 并且只有 IE9 无法正确显示我的网站... 【参考方案1】：

有这个小书签可以告诉您在所有 CSS 规则（您感兴趣的）中使用的 CSS 规则的数量。

CSS Crunch

【讨论】：

【参考方案2】：

这将执行内联 CSS...

var selectors = 0;

$('style').each(function() 

   var styles = $(this).html();

   // Strip comments
   styles = styles.replace(/\/\*.+?\*\//sg, ''); 

   var matches = styles.match(/\[\s.]*\/g);

   selectors += matches.length;

);

jsFiddle.

【讨论】：

【参考方案3】：

在您的 CSS 文件中搜索并用“”替换“”。大多数编辑会告诉你做了多少次替换……

【讨论】：

这只会计算规则的数量，而不是选择器的数量。每个规则可以有多个选择器，例如h1, h2, h3 margin: 0; 我认为你应该计算 的数量加上 , 的数量（逗号）。据我所知，这将是一个非常简单的检测机制。【参考方案4】：

我的项目Bless CSS 可能就是您正在寻找的。它将根据选择器限制分析文件并在最佳点拆分它们。

它也内置于CodeKit。

【讨论】：

npm install -g bless 然后blessc count <path-to-file>【参考方案5】：

可以在 Firefox 的 Firebug 控制台中运行以下 sn-p 来统计 CSS 选择器（不仅仅是 CSS 规则）的总数，并检查它是否达到每个样式表的 limit of 4095 selectors：

var
  styleSheets = document.styleSheets,
  totalStyleSheets = styleSheets.length;

for (var j = 0; j < totalStyleSheets; j++)
  var
    styleSheet = styleSheets[j],
    rules = styleSheet.cssRules,
    totalRulesInStylesheet = rules.length,
    totalSelectorsInStylesheet = 0;

  for (var i = 0; i < totalRulesInStylesheet; i++) 
    if (rules[i].selectorText)
      totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
    
  
  console.log("Stylesheet: "+styleSheet.href);
  console.log("Total rules: "+totalRulesInStylesheet);
  console.log("Total selectors: "+totalSelectorsInStylesheet);

【讨论】：

感谢您发布答案！虽然代码 sn-p 可以回答这个问题，但添加一些附加信息仍然很棒，比如解释等.. 好的。我的英语很差，但我会努力的） @jetli13 我的萤火虫说Error: The operation is insecure. "rules = styleSheet.cssRules,"。有任何想法吗？ FF 20.0.1 上的 FB 1.11.2 @RaphaelIDDL 我想你需要的答案在这里link 在 Chrome 控制台中也为我工作。【参考方案6】：

如果您想将其作为构建过程的一部分，或者只是不想在 JS 中进行，则用于计算选择器的简单算法：

用“，”替换“”和“”之间的文本，然后计算“，”的个数。这将为您提供文件上的选择器数量。

【讨论】：

【参考方案7】：

有点晚了，但对于任何正在寻找 CSS 选择器计数器的人来说： http://snippet.bevey.com/css/selectorCount.php 它非常简单，并且可以使用多个样式表，它甚至会告诉您何时达到 4096 限制

【讨论】：

css选择器的权重计算

...如何处理样式规则的冲突，显示元素最后的样式，用到的计算规则就是CSS选择器的权重规则。根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有一般选择器的规则。如果两个规则的特殊性相同，那么后定... 查看详情

css选择器，权重

...t的css属性权重无穷大例子：p{ background:red!important;}权重的计算将选择器上面的权重进行叠加后的总和就是该选择器的权重例子：#auc.ap{background-color：r 查看详情

css-层叠性中的权重计算规则

...重： id的权重> 类选择器 >标签选择器 ●权重计算：规则：1.选中到文字所在的标签，就计算权重：“id的数量”“class的数量”“标签的数量”分别占据“百位”“十位”“ 查看详情

css优先级计算规则

选择器的特殊性值表述为4个部分，用0,0,0,0表示。ID选择器的特殊性值，加0,1,0,0。类选择器、属性选择器或伪类，加0,0,1,0。元素和伪元素，加0,0,0,1。通配选择器*对特殊性没有贡献，即0,0,0,0。最后比较特殊的一个标志!important（... 查看详情

如何计算与我的 CSS 选择器匹配的元素数量？

】如何计算与我的CSS选择器匹配的元素数量？【英文标题】：HowcanIcountthenumberofelementsthatmatchmyCSSselector?【发布时间】：2010-12-0702:06:15【问题描述】：我正在尝试使用SeleniumRC测试我的GWT应用程序并尝试使用CSS选择器匹配元素。我... 查看详情

css优先级和层叠

css优先级和层叠1、优先级   计算方法：      a、行内样式      b、id选择器的数量      c、类，伪类和属性选择器的数量     查看详情

css选择器和权重计算

...标签的样式渲染顺序:id>class/伪类>标签选择器的权重计算:假设:id选择器的权重为100class/伪类的权重为10标签选择器的权重为1则:--#box=>100.box=>10.box:hov 查看详情

选择器的权重与优先规则

...，但是很多中文版本的css图书中采用了10进制的简单相加计算方式（包括第一版《CSS权威指南》，第二版中已经纠正）。因此把规范中对CSS层叠优先级的相关 查看详情

css样式表｛二｝

...ID选择器100行内样式1000  　　复杂选择器优先级的计算：　　　　1群组选择器不参与计算　　　　后代和子代选择器，各种选择器权值　　　　2伪类选择器的权值与类选择器保持一致，都是10　　2尺寸单位　　　1&nbs 查看详情

css中的权重

...内联样式，权重为1000【写在HTML元素的style属性中】二、ID选择器，权重为0100【非内联样式】三、类、伪类、属性选择器，权重为0010【非内联样式】四、标签、伪元素选择器，权重为0001【非内联样式】五、通配符、子选择器、相... 查看详情

计算机，网页设计中css各选择器的含义，用途和不同，尤其是复合内容选择器？

1元素选择器HTML文档的元素名称就是元素选择器。1）语法，例如：html<color:black;>、h1color:blue;、pcolor:silver;2）缺点：不同的元素样式相同，即不能跨元素。所以做不到同一类元素下的细分。2类选择器自定义的某种选择器。1）... 查看详情

关于css中选择器的小归纳

关于css中选择器的小归纳一、基本选择器基本选择器是我们平常用到的最多的也是最便捷的选择器，其中有元素选择器（类似于a，div，body，ul），类选择器（我们在HTML标签里面为其添加的class），ID选择器（与类选择器类似），... 查看详情

html+css基础css选择器选择器的权重

css选择器 选择器的权重在css中，哪个选择器的权重高，就走谁的样式标签选择器的权重是1class选择器的权重是10Id选择器的权重是100行间样式的权重是1000带有关键字！important 的css属性 权重是无穷大     查看详情

LESS 中 CSS 选择器的转义语法

】LESS中CSS选择器的转义语法【英文标题】：EscapesyntaxforCSSselectorsinLESS【发布时间】：2012-01-0713:45:38【问题描述】：转义CSSproperties的波浪号(~)和引号方法似乎可以正常工作，但是如果我希望CSS选择器包含数字（或我希望LESS包含的... 查看详情

在物化 css 中更改日期选择器的语言

】在物化css中更改日期选择器的语言【英文标题】：Changelanguageofdatepickerinmaterializecss【发布时间】：2017-12-2216:18:54【问题描述】：我正在尝试在实际实现css版本0.99.0中更改datepicker的语言，但不起作用。我尝试更改*日期选择器defa... 查看详情

XPath 中 CSS 多重选择器的等价物

】XPath中CSS多重选择器的等价物【英文标题】：EquivalentofCSSmultipleselectorinXPath【发布时间】：2011-10-1215:18:34【问题描述】：XPath中是否有某种CSS多重选择器（逗号），所以我可以在一个查询中找到例如//img和//*[@background]元素？【问... 查看详情

css选择器的权重关系

切记CSS选择器的权重关系，避免在页面中出现CSS样式无法生效的情况~–内嵌idclass元素–abcd内嵌1000id0100class、属性、伪类0010元素、伪元素0001通配符*0   !improtant（写在声明中，更改权重值）最高   a组数值只... 查看详情

css选择器的优先级-css选择器世界

1对于优先级的计算，数值计数法：每一段css语句的选择器都对应一个具体的数值，数值越大，优先级越高，其中的css语句将被优先渲染。其中：出现一个0级选择器，优先级数值+0；出现一个1级选择器，优先级数值+1；出现一个2... 查看详情