是否有JS库根据具体情况订购CSS选择器文本？

Question

可能重复： 根据特异性对一组CSS选择器进行排序

我需要一个JS库，该库将CSS选择器文本从大多数特定的选择器文本排序到不太具体的选择器文本，其中根据W3C指定了专用性。

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

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

Answer 1

在对您的问题的评论中，josh3736链接确定特异性的W3C规范。如果你觉得你想自己写这样一个库(我会鼓励，如果没有其他原因，除了了解更多)，他们的方法似乎是一个很好的参考。

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

• 如果声明来自' style‘属性，而不是带有选择器的规则，则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属性在源文档的DTD中被定义为"ID”。

比较四个数字a(在一个大基数的数字系统中)的特性。

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); });