CSS特異性のポイントはどのように計算されますか

このブログを偶然見つけました-http ://www.htmldog.com/guides/cssadvanced/specificity/

特異性はCSSのポイントスコアリングシステムであると述べています。要素は1ポイント、クラスは10ポイント、IDは100ポイントの価値があることを示しています。さらに、これらのポイントが合計され、全体の量はそのセレクターの特異性であるとも言えます。

例えば：

body = 1ポイント
body .wrapper = 11ポイント
body .wrapper #container = 111ポイント

したがって、これらのポイントを使用すると、次のCSSおよびHTMLによりテキストが青色になることが期待されます。

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

15のクラスが150ポイントに等しいのに、1のIDが100ポイントに等しいのに比べて、テキストが赤くなるのはなぜですか？

どうやらポイントは合計されただけではないようです。それらは連結されています。詳しくはこちら-http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

これは、セレクターのクラスが0,0,15,0OR であることを意味し0,1,5,0ますか？

（私たちは、このようにIDセレクタの特異性のルックスを知っているように、私の本能は、それが元だ教えてください：0,1,0,0）

ペッカの答えは実質的に正しく、おそらくこの問題について考える最良の方法です。

しかし、すでに多くの人が指摘しているように、W3C CSS勧告では、「3つの数値abc（大きな基数を持つ数値システム）を連結すると、特異性が得られる」と述べています。したがって、私のオタクは、このベースの大きさを把握する必要がありました。

この標準アルゴリズムを実装するために採用された（少なくとも4つの最も一般的に使用されるブラウザー^{*によって}）「非常に大きなベース」が256または2 ^{8であること}がわかりました。

つまり、IDが0でクラス名が 256で指定されたスタイルは、IDが1つだけで指定されたスタイルをオーバーライドします。私はいくつかのフィドルでこれをテストしました：

• 255個のクラスは1つのIDをオーバーライドするには不十分です
• ...しかし、256クラスがある 1つのIDを上書きするのに十分な

• ...と256タグ名がある 1クラス名を上書きするのに十分な

• ...しかし、残念ながら、256個のIDは1つのインラインスタイルをオーバーライドするには不十分です （2012/8/15に更新-使用する必要があります!important）

つまり、実質的には「ポイントシステム」がありますが、それは10を基数とするものではありません。256を基数としています。これがどのように機能するかを次に示します。

（2 ⁸）²または65536、セレクターのID数の倍数
+（2 ⁸）¹または256、セレクターのクラス名の数倍
+（2 ⁸）⁰または1、タグ数の倍数-セレクターの名前

これは、概念を伝えるための裏返しの演習ではあまり実用的ではありません。
そのため、このトピックに関する記事はbase 10を使用しています。

***** [Operaは2 ^16を使用します（karlcowのコメントを参照）。他のいくつかのセレクターエンジンは無限大を使用します —実際にはポイントシステムはありません（Simon Sapinのコメントを参照）。]

更新、2014年7月：
Blazemongerが年の初めに指摘したように、webkitブラウザー（chrome、safari）は256より高いベースを使用しているように見えます。おそらくOperaのように2 ¹⁶でしょうか？IEとFirefoxはまだ256を使用しています。

良い質問。

確かにわかりません-私が見つけたすべての記事は複数のクラスの例（ここなど）を避けていますが、クラスセレクターとIDの間の詳細を比較することになると、クラスは15どれだけ詳細でも、価値だけ。

これは、特異性の振る舞いに関する私の経験と一致します。

ただし、クラスのスタックが必要です。

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

より具体的です

.o

私が持っている唯一の説明は、積み重ねられたクラスの特異性はお互いに対してのみ計算され、IDに対しては計算されないということです。

更新：途中で取得しました。これはポイントシステムではなく、15ポイントのクラスに関する情報は正しくありません。これは、ここで非常によく説明されている4部の番号付けシステムです。

開始点は4桁です。

style  id   class element
0,     0,   0,    0

特異性に関するW3Cの説明によれば、上記のルールの特異性の値は次のとおりです。

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

これは非常に大きな（未定義？）基数を持つ番号付けシステムです。

私の理解では、底が非常に大きいため、列2の列1と同じように、列3の列4の数値が0を超えることはありません。これは正しいですか？

私よりも数学をよく理解している人が番号付けシステムと、個々の要素が9より大きい場合にそれを10進数に変換する方法を説明できるかどうかに興味があります。

現在のセレクターレベル4ワーキングドラフトは、CSSでの特異性を適切に説明しています。

特異性は、3つのコンポーネントを順番に比較することによって比較されます。A値が大きい特異性はより特異的です。2つのA値が関連付けられている場合、より大きなB値を持つ特異性はより具体的です。2つのB値も関連付けられている場合は、c値が大きい方がより具体的です。すべての値が関連付けられている場合、2つの仕様は等しくなります。

つまり、値A、B、Cは互いに完全に独立しています。

15クラスでは、セレクターに150の特異性スコアは与えられません。B値は15になります。単一のA値でこれを上回ることができます。

比喩として、祖父母1人、親1人、子供1人の家族を想像してみてください。これは1,1,1と表すことができます。親に15人の子供がいる場合、それが突然別の親になることはありません（1,2,0）。それは、子供が1人の場合（1,1,15）に比べて、親の責任が非常に大きいことを意味します。;）

同じドキュメンテーションも続けて言っています：

ストレージの制限により、実装ではA、B、またはcのサイズに制限がある場合があります。その場合、制限よりも高い値は、オーバーフローせずにその制限にクランプする必要があります。

これは、ファウストの回答で示された問題に取り組むために追加されました。これにより、2012年のCSS実装では、特異度の値が互いにオーバーフローすることが可能になりました。

2012年に戻って、ほとんどのブラウザーは255の制限を実装しましたが、この制限はオーバーフローすることが許可されていました。255クラスのA、B、c特異度スコアは0,255,0でしたが、256クラスはオーバーフローし、A、B、cスコアは1,0,0でした。突然、私たちのB値がA値になりました。セレクターレベル4のドキュメントは、制限がオーバーフローすることは決して許されないと述べて、その問題を完全に明らかにしています。この実装では、 255クラスと256クラスの両方が同じA、B、cスコア0,255,0を持ちます。

ファウストの回答で示された問題は、最近のほとんどのブラウザーで修正されています。

私は現在、CSS Mastery：Advanced Web Standards Solutionsという本を使用しています。

第1章、16ページは言う：

ルールの具体性を計算するために、各タイプのセレクターに数値が割り当てられます。次に、各セレクターの値を合計することにより、ルールの特異性が計算されます。残念ながら、特異度は10を基数として計算されていませんが、不特定の高い基数を計算しています。これは、IDセレクターなどの特定性の高いセレクターが、タイプセレクターなどの特定性の低い多くのセレクターによってオーバーライドされないようにするためです。

（強調鉱山）と

セレクターの特異性は、a、b、c、dの4つの構成レベルに分類されます。

• スタイルがインラインスタイルの場合、a = 1
• b = idセレクターの総数
• c =クラス、疑似クラス、および属性セレクターの数
• d =タイプセレクターと疑似要素セレクターの数

さらに、多くの場合、base-10で計算を実行できますが、すべての列の値が10未満の場合のみです。

あなたの例では、IDは100ポイントの価値はありません。それぞれ[0, 1, 0, 0]ポイントの価値があります。したがって、1のid は高基数システム[0, 1, 0, 0]よりも大きいため、15クラスに勝り[0, 0, 15, 0]ます。

私は特異度ランキングとオリンピックメダルの表を比較するのが好きです（最初に金メダル、次に銀メダル、次に銅メダルの数に基づく方法）。

それはあなたの質問（1つの特異性グループの膨大な数のセレクター）でも機能します。特異性は、各グループを個別に検討しました。現実の世界では、セレクターが12個を超えるケースはほとんどありません。

ここには、非常に優れた特異度計算機もあります。そこに例（#aおよび.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o）を置いて結果を確認できます。

2016年リオオリンピックのメダル表の例

ブログの説明が正しいとは思いません。仕様はこちら：

http://www.w3.org/TR/CSS2/cascade.html#specificity

クラスセレクターからの「ポイント」は、「id」セレクターよりも重要になることはできません。それはちょうどそのように機能しません。

私はそれを言うでしょう：

Element < Class < ID

同じものの倍数である場合、それらはあなたが得るものに依存してスタックするだけだと思います。したがって、クラスは常に要素をオーバーライドし、IDは常にクラスをオーバーライドしますが、3が青で1が赤の場合、4つの要素のうちどれに下がるかは青になります。

例えば：

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

赤くなります。

例http://jsfiddle.net/RWFWq/を参照してください

「5が赤、3が青だとしたら、今赤くなります」