計算一個CSS文件中選擇器的數量

是否有一個現有的插件/應用程序/程序/腳本/任何分析和計數文件的CSS選擇器？我想檢查，如果我的CSS文件不工作在IE瀏覽器的原因是因爲我的選擇器計數是超過4095（這是我很肯定不是）計算一個CSS文件中選擇器的數量

謝謝！

p.s.如果有haml/sass /羅盤解決方案，請加上點數

2011-03-08 corroded

難道選擇器的數量會成爲問題？如果不是，那是什麼？我遇到了同樣的問題。突然之間IE9和只有IE9顯示我的網站不正確... – hawkeye126 2016-07-29 19:35:27

下面的片段可以在Firefox中的Firebug的控制檯上運行以計數的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); 
}

來源

2012-09-07 07:30:38 jetli13

感謝您發表回答！雖然代碼片段可以回答這個問題，但添加一些附加信息仍然很棒，比如解釋等。 – j0k 2012-09-26 07:59:00

好的。我的英語很差，但我會嘗試） – jetli13 2012-11-22 12:34:12

@ jetli13我的螢火蟲說'錯誤：操作是不安全的。「rules = styleSheet.cssRules，」。有任何想法嗎？ FB 1.11.2 FF 20.0.1 – RaphaelDDL 2013-04-30 21:08:42

有一個小書籤告訴你使用CSS規則的總數（你感興趣的）。

CSS Crunch

來源

2011-03-08 05:05:28

這將做內聯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。

來源

2011-03-08 05:09:37 alex

不尋找內聯，我有一個單獨的樣式表 – corroded 2011-03-08 05:16:55

搜索&在CSS文件中替換「{」替換爲「{」。大多數編輯會告訴你做了多少替換...

來源

2012-07-18 20:51:33

這隻會計算規則的數量，而不是數量的選擇器。每個規則可以有多個選擇器，例如'h1，h2，h3 {margin：0; }' – 2012-07-18 23:24:47

我認爲你應該計算{加上數字，（逗號）的數量。據我所知，這將是一個非常簡單的檢測機制。 – Wouter 2015-07-14 21:13:51