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

Is there an JS library that orders CSS selector texts according to specificity?

本文关键字：排序 JS 文本 特异性 有根据 CSS 选择器 是否      更新时间：2023-09-26

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

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

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

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

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

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

  • 如果声明来自，则计数 1 是"style"属性而不是带有选择器的规则，否则为 0 （= a）（在 HTML 中，元素的"style"属性的值是样式表规则。这些规则没有选择器，因此 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-b-c-d（在具有大基数的数字系统中）给出了特异性。

我想

我会试一试。 随意使用、修改（或修复）您认为合适的代码。我不能保证这是正确的，但他们在 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); });
相关文章：