是否有一個JS庫根據特異性命令CSS選擇器文本？

Question

可能重複：
Sorting a set of CSS selectors on the basis of specificity

我需要一個JS庫的順序從最具體的選擇文本CSS選擇器的文本到少特定的選擇文本，其中特異性根據W3C

規定

如果沒有任何庫，我可以使用JS或jQuery簡單地編寫它嗎？

CSS選擇器文本可能爲div#body .text。

Answer 1

在對您的問題的評論中，josh3736鏈接the W3C specification for determining specificity。如果你覺得自己願意自己寫一個這樣的圖書館（我鼓勵，如果沒有其他理由，除了學習更多的信息），他們的方法似乎是一個很好的參考。

如下一個選擇的特異性被計算：

• 計數1，如果該聲明是從是 '風格' 屬性，而不是一個規則與一個選擇器，否則爲0（= A）（在HTML中，元素的「樣式」屬性的值是樣式表規則，這些規則沒有選擇器，所以a = 1，b = 0，c = 0和d = 0）。選擇器（= b）
• 計算選擇器中其他屬性和僞類的數量（= c）
• 計數在所述選擇（= d）

特異性是僅基於所述選擇的形式的元素名稱和僞元素的數量。特別是，即使id屬性被定義爲「ID」，也將「[id = p33]」形式的選擇器計爲屬性選擇符（a = 0，b = 0，c = 1，d = 0） 「在源文檔的DTD中。

將四個數字a-b-c-d（在具有大基數的數字系統中）連接在一起給出了特異性。

Answer 2

我想我會給這個刺。隨意使用，修改（或修復）這段代碼，只要你認爲合適。我不能保證它是正確的，但是他們在w3c規範中給出的例子都產生了相同的結果。

function specificity(selector, isStyleAttribute) { 

    selector = selector || ""; 
    function numMatches(regex) { 
     return (selector.match(regex)||[]).length; 
    } 

    var numClasses = numMatches(/\.[\w-_]+\b/g); 
    var numIds = numMatches(/#[\w-_]+\b/g); 
    var numNamesInBraces = 0; 
    var namesInBraces = selector.match(/\[[^\]]*\b[\w-_]+\b[^\]]*\]/g) || []; 
    for (var idx = 0; idx < namesInBraces.length; ++idx) { 
     numNamesInBraces += (namesInBraces[idx].match(/\b[\w-_]+\b/g)||[]).length; 
    } 

    var results = [0,0,0,0]; 
    results[0] = isStyleAttribute ? 1 : 0; 
    results[1] = numIds; 
    results[2] = numMatches(/\[[^\]]+\]/g) + numClasses; 
    results[3] = numMatches(/\b[\w-_]+\b/g) - numIds - numClasses - numNamesInBraces; 
    return results.join(','); 

} 

如果要排序與它的陣列，它可以像這樣使用：

selectors.sort(function(a,b) { return specificity(a) > specificity(b); });