8

私の主な目標は、特異性に基づいてCSSスタイルブロックを並べ替えることです。私は以前にSOの助けを借りていましたが、なんとかこの関数を作成することができました。要旨を参照してください。

次に例を示します。

function specificity($selector){
// https://gist.github.com/2774085
}

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

$array = css_array();

uksort($array, $compare);

私がこのCSSに出くわすまで、上記はうまく機能してきました。

html, body, body div{
    background: transparent;
}
body {
    background-color: #D96F02;
}

これはこれに並べ替えられます：

body { // 1 point
    background-color: #D96F02;
}
html, body, body div{ // 4 points
    background: transparent;
}

ただし、これはブラウザがCSSを適用する方法ではありません。

私の特異性関数は、セレクターの特異性に基づく順序付けではなく、CSSの順序付けの重要性を見逃している可能性があると思いますか？これは本当ですか？

アップデート

私がすべきことは比較機能にあると思います10。特異性はセレクターだけに基づくのではなく、セレクターの順序にも基づくため、常に言いたいことを追加する必要があります。だからこのようなもの：

 $compare = function($a, $b) use ($specificity) {
        return ($specificity($a) + 10) - $specificity($b)
    };

これはどのように見えますか、そしてこの場合に与えるポイントの数をどのように決定しますか！？

4

1 に答える 1

4

シリアル化すれば問題は解決するはずです

html, body, body div{ 
    background: transparent; 
}

次のように記述されているかのように、個別のルールとして。

html{ 
    background: transparent; 
} 
body{ 
    background: transparent; 
} 
body div{ 
    background: transparent; 
}

セマンティクスは少し紛らわしいですが、基本的には、同じルールセットに結合された独立したセレクターに基づいて宣言全体を判断しています。

更新を再確認してください。特異性はセレクターの順序の影響を受けません。つまり、以下のルールは同じ特異性を持っています。赤でレンダリングするルールを再配置しない限り、最後のルールは青で先行レンダリングされます。

<style>
    #container span {color:red;}
    div #content {color:blue;}
</style>

<div id="container"><span id="content">Hello world!</span></div>
于 2012-05-24T05:25:43.963 に答える