是否有根据特异性对 CSS 选择器文本进行排序的 JS 库？ [复制]

Question

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

我需要一个 JS 库，将 CSS 选择器文本从最具体的选择器文本排序到不太具体的选择器文本，其中的特异性根据 W3C 指定

如果那里没有任何库，我可以简单地使用 JS 或 jQuery 编写它吗？

CSS 选择器文本可以是div#body .text。

Answer 1

在您问题的 cmets 中，josh3736 链接 the W3C specification for determining specificity。如果您倾向于自己编写这样的库（我鼓励这样做，如果没有其他原因，只是为了了解更多信息），他们的方法似乎是一个很好的参考。

选择器的特异性计算如下：

• 如果声明来自，则计数 1 是“样式”属性而不是带有选择器的规则，否则为 0 (= a) （在 HTML 中，元素的“样式”属性的值是样式表规则。这些规则具有没有选择器，因此 a=1、b=0、c=0 和 d=0。）
• 统计选择器中 ID 属性的数量 (= b)
• 统计选择器中其他属性和伪类的数量 (= c)
• 统计选择器中元素名和伪元素的个数（=d）

特异性仅基于选择器的形式。特别是，“[id=p33]”形式的选择器被视为属性选择器（a=0，b=0，c=1，d=0），即使 id 属性被定义为“ID " 在源文档的 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); });