6

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

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

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

我怎样才能做到这一点？是否有任何现有的图书馆？或者任何有用的库来帮助解决这个问题？

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

4

2 回答 2

3

简短的答案：

是否有任何现有的图书馆？

不，据我所知，没有人会为您做到这一点“开箱即用”。

或者任何有用的库来帮助解决这个问题？

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

于 2012-05-17T13:21:53.507 回答
0

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

CSS 特异性

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

于 2012-05-17T13:18:30.420 回答