根据选择器特异性排序 CSS

Posted 2023-03-06

【中文标题】根据选择器特异性排序 CSS

【英文标题】：Order CSS based on Selector Specificity

【发布时间】：2012-05-25 01:35:42

【问题描述】：

我已将给定的 CSS 文件/字符串解析为 JSON 对象，如下所示：

    "#header": 
        "color": "#000000"
    ,
    "#header h1": 
        "color": "#000"
    ,
    "h1": 
        "color": "#4fb6e5"
    

我现在要做的是根据具体性重新排序它们。在这种情况下，#header h1 应该在 JSON 对象中的 h1 之后，因为这就是它们在浏览器中的应用方式。

我该怎么做？是否有任何现有的图书馆？或者有什么有用的库可以帮助解决这个问题？

我可以同时使用 javascript/jQuery 或 php 来执行此操作。我正在寻找实施建议，希望这已经完成！

【问题讨论】：

对于 JavaScript，我在这里用伪代码设置了一个起点：Sorting a set of CSS selectors on the basis of specificity，但还没有实现。如果你还没有写一个 JS 库来做这件事，我想我可以接受挑战！

【参考方案1】：

简短回答：

是否有任何现有的库？

不，据我所知，没有人会为您提供这种“开箱即用”的功能。

或者有什么有用的库可以帮助解决这个问题？

是的，有json_decode和uksort：

$specificity = function($selector) 

    /*
     * @link http://www.w3.org/TR/selectors/#specificity
     *
     * 9. Calculating a selector's specificity
     *
     * A selector's specificity is calculated as follows:
     * 
     *  * count the number of ID selectors in the selector (= a)
     *  * count the number of class selectors, attributes selectors, and 
     *    pseudo-classes in the selector (= b)
     *  * count the number of type selectors and pseudo-elements in the 
     *    selector (= c)
     *  * ignore the universal selector
     *
     * Selectors inside the negation pseudo-class are counted like any other, 
     * but the negation itself does not count as a pseudo-class.
     *
     * Concatenating the three numbers a-b-c (in a number system with a large 
     * base) gives the specificity.
     */
    ...
    return (int) $result;


$compare = function($a, $b) use ($specificity) 
    return $specificity($a) - $specificity($b)
;

$array = json_decode('"yours" : "json"', true);

uksort($array, $compare);

echo json_encode((object) $array);

正如这个代码示例所示，它只解释了如何计算注释中的特异性，它不包含代码。那只是因为我手头没有那段代码，但我已经在其中说明了这是如何完成的（至少对于 CSS 3）。

如果您正在寻找 CSS 选择器解析器，我知道 XDOM（因为我编写了它）。它可以在 github 上找到：https://github.com/hakre/XDOM - 这是一个 100% 兼容 CSS 3 的 CSS 选择器解析器。

据我所知，就现成的解决方案而言，这就是您目前所获得的大部分内容。我所知道的所有其他 CSS 选择器解析器都与 CSS 3 标准不完全兼容，因为它们不遵循 W3C 规范。这可能对您有好处：如果您不需要严格的 CSS3 兼容性，您可能会发现一些其他代码块已经满足您的需求。

【讨论】：

好吧，我设法拼凑了一些我在网上找到的东西。这在你看来如何？ gist.github.com/2719627 - 我认为它遵循你提到的所有规则。

@Abs：我可以查看一下，看看我的叉子：gist.github.com/2724460 - 我在那里留下了一些 cmets，你可以看到一些可能有用的更改。通常，您需要向该函数添加测试，否则我会说它看起来非常脆弱。一些测试输入值应该使它工作得更好。

感谢您的浏览，退货放错地方了！解决这个问题！我还重置了分数，因为我一次使用一组选择器使用此功能，我认为应该没问题。

@Abs：使函数一次只能在一个选择器上工作。然后，您可以通过 array_map 或 foreach 轻松地在多个上使用它。只需针对特定性编写函数，然后将其集成到您的处理中。

以下代码可能对您来说也很有趣。它是现有组件中基于正则表达式的 CSS 解析：pear.php.net/package/html_CSS/docs/1.5.4/__filesource/…

【参考方案2】：

实际上有一个按特异性排序的标准算法，我想你可能想看看。

CSS Specificity

某种启发式公式也很有用，例如检查是否有前导 # 或计算空格和点的数量。