Question

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

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

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

我该怎么做？这有没有现有的库？或者任何有用的库来帮助解决这个问题？

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

Answer 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兼容性，您可能会发现一些其他代码块已经满足您的需求。

Answer 2

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

CSS Specificity

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

根据选择器特异性订购CSS

2 个答案: