1

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

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

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

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

4

2 回答 2

1

在对您的问题的评论中，josh3736 链接了 W3C 规范以确定特异性。如果您倾向于自己编写这样的库（我鼓励这样做，如果没有其他原因，只是为了了解更多信息），他们的方法似乎是一个很好的参考。

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

  • 计数 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 中。

连接四个数字 abcd（在具有大基数的数字系统中）给出了特异性。

于 2012-06-24T21:55:03.327 回答
1

我想我会试一试。随意使用、修改（或修复）您认为合适的代码。我不能保证它是正确的，但是他们在 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); });
于 2012-06-24T23:04:51.200 回答