6

次のように、特定の CSS ファイル/文字列を JSON オブジェクトに解析しました。

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

私が今やりたいことは、特定性に基づいてそれらを再注文することです。この場合、JSON オブジェクト#header h1の は の後に来る必要があります。これは、ブラウザーでの適用方法です。h1

これどうやってするの？このための既存のライブラリはありますか? または、これを支援する便利なライブラリはありますか?

これを行うには、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 セレクター パーサーは、W3C 仕様に準拠していないため、CSS 3 標準と完全には互換性がありません。これはあなたにとって良いかもしれません: 厳密な CSS3 互換性を必要としない場合は、ニーズに合った他のコード チャンクが既に見つかるかもしれません。

于 2012-05-17T13:21:53.507 に答える
0

実際には、特異性による順序付けの標準アルゴリズムがあります。それを参照してください。

CSS の特異性

また、ある種のヒューリスティック式も役立ちます。たとえば、先頭に # があるかどうかをチェックしたり、スペースやドットの数を数えたりします。

于 2012-05-17T13:18:30.420 に答える