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

Posted 2023-03-06

【中文标题】计算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 限制