0

10 個のマークに対して特異性が高いのは、どのクラス セレクター ルールですか?

.A.E.F .C .D

また

.A .B .C span

HTML:

<div class="A E F">
    <div class="B">
        <div class="C">
            <div class="D">
                <span>17590</span>
                <span>Points</span>
            </div>
        </div>
    </div>
</div>

CSS:

.A.E.F .C .D /* span */ {
    font-size: 1em;
}

.A .B .C span {
    font-size: .95em;
}

これは、問題を示す JS フィドルです: http://jsfiddle.net/UgkZY/

最初のルールが勝つと思っていたでしょう。3 x クラス + 1 x タイプではなく、5 x クラス。ただし、.AEF は 1 つのクラスとしてしか得点しないように見えるため、2 番目のルールが優先されます。

次のオンライン CSS 特異性計算機http://specificity.keegan.st/を使用すると、最初のルールが優先されると考えられます。実際、Chrome ブラウザでは 2 番目のブラウザが優先されます。

.ABC が実際に CSS の特異性の観点から 1 つのクラスと見なされることを誰かが明確にすることはできますか?

ところで、スパンセレクターを最初のルールに追加すると、それが勝ちます。

私の CSS 仕様によると、最初のものが勝つように見えます。

http://www.w3.org/TR/selectors/#specificity

LI.red.level /* a=0 b=2 c=1 -> 特異度 = 21 */

非常に紛らわしいと言わざるを得ません。

4

2 に答える 2

4

特異性は、同じ要素に一致するセレクターを比較する場合にのみ関係します。この場合、2つのルールは完全に異なる要素に一致します。最初のルールdivはクラスD（div.D）を含む要素に一致し、2番目のルールはその中spanの要素に一致します。その場合、両方のルールが適用されますが、要素が異なるため、フォントサイズはの95％になり、その結果、そのフォントサイズはその祖先の100％になります。スタイルのオーバーライドやオーバーライドは行われません。div.Dspandiv.D

最初のルールに追加すると、2番目のルールも適用される内部spanの同じ要素と一致するようになります。そうして初めて、特異性が働きます。最初のルールは、クラスセレクターのカウントに基づいて2番目のルールをオーバーライドすることになります。spandiv.D

また、.A.B.C3つのクラスとしてカウントされます。各クラスセレクターはそれ自体をカウントします。

于 2013-01-30T17:47:22.893 に答える
0

実際、2 番目のセレクターが勝ちます。おそらく、.AEFが HTML ツリー内の単一の要素を対象としているためです。

于 2013-01-30T17:45:46.083 に答える