1

重複の可能性:
CSS 固有のポイント

これが私が意味することの例です：

http://jsfiddle.net/BTJXt/9/

どういうわけか、1 つの ID は一見無数のクラスを打ち負かします。これはどのように計算されていますか？

<style>
    div {
    height:200px;
    width:200px;
    }

    #big .little {
    /* Specificy value = 110 */
    background-color:red;
    }

     #big .little.little {
    /* Specificy value = 120 */
    background-color:blue;
    }

    .little.little.little.little.little.little.little.little.little.little.little.little.little {
    /* Specificy value = 130, why doesn't this win? */
    background-color:green;
    }


</style>   

<div id="big">
    <div class="little"></div>
</div>​
4

1 に答える 1

14

簡単に言えば、ID は常に、任意の数のクラス、疑似クラス、属性セレクター、または型セレクターよりも優れていますが、必ずしも別の ID よりも優れているとは限りません。覚えておく必要があるのはそれだけです。

または、技術的な核心に入り込むために: 特定性は、私たち全員が使用する一部の 10 進数ではカウントされません。IDは「100ポイント」の価値がなく、クラス/属性/疑似クラスは「10ポイント」ではなく、タイプ/疑似要素は「1ポイント」ではありません。これらの数値を合計して数学的に比較することはありません。 、それらの合計に基づいて; それはそれがどのように機能するかではありません。(ID の個々の数、クラス/属性/疑似クラスの数などを合計しますが、すべての個々の数を合計して 1 つの合計にするわけではありません。)

これらの単純なセレクターの特異性は、かなり異なる方法でカウントされます。仕様はそれを最もよく言います：

9. セレクターの特異性の計算

セレクターの特異性は次のように計算されます。

  • セレクター内の ID セレクターの数を数える (= a)
  • セレクター内のクラスセレクター、属性セレクター、疑似クラスの数を数える (= b)
  • セレクター内の型セレクターと疑似要素の数を数える (= c)
  • ユニバーサルセレクターを無視する

否定疑似クラス内のセレクターは、他のものと同様にカウントされますが、否定自体は疑似クラスとしてカウントされません。

3 つの数 abc を (基数が大きい数体系で) 連結すると、特異性が得られます。

例:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

「連結」(文字列を結合すること) であり、「加算」(2 + 2 = 4 の算術的な意味) ではないことに注意してください。

また、「基数が大きい数体系」と書かれていることにも注意してください。これは、これらの特異性スコアを 10 進数として使用しないことを示すためのものです。ここで、13 × 10 = 130 は、平たく言えば 1 × 100 = 100 よりも大きくなります。

これは、セレクターの特異性を計算する方法です。

/* 1 ID, 1 class     -> specificity = 1-1-0 */
#big .little

/* 1 ID, 2 classes   -> specificity = 1-2-0 */
#big .little.little

/* 0 IDs, 13 classes -> specificity = 0-13-0 */
.little.little.little.little.little.little.little.little.little.little.little.little.little

ID セレクターが使用されていないため、3 番目のセレクターの特異性が最初の 2 つよりも低いことに注意してください。

どちらも ID セレクターを持つ他の 2 つのセレクターを比較すると、2 番目のセレクターにはもう 1 つのクラスがあることがわかります。この場合、それぞれに ID セレクターがありますが、余分なクラス セレクターがあるため、2 番目のセレクターが優先されます。これは、ID セレクター自体が同等の特異性を共有しているためです。

于 2012-03-02T21:06:54.037 に答える