[解決済み] CSSの特異性のポイントはどのように計算されるのですか？

質問

特異性を研究する私は、このブログにつまずいた - 。 http://www.htmldog.com/guides/cssadvanced/specificity/

特異性とは、CSSの加点方式であることが書かれています。要素は 1 ポイント、クラスは 10 ポイント、ID は 100 ポイントの価値があると書かれています。さらに、これらのポイントを合計し、その総合的な金額がそのセレクタの特異性であると述べています。

例えば

ボディ = 1ポイント

ボディ.ラッパー = 11点

body .wrapper #コンテナ = 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点、1IDで100点なのに、なぜ文字が赤なのですか？

どうやら、ポイントは単に合計されるだけでなく、連結されるようです。それについては、こちらをご覧ください。 http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

ということは、セレクタの中のクラス = 0,0,15,0 または 0,1,5,0 ?

(私の直感では前者だと思うのですが、IDセレクタの特異性はこのように見えると知っているからです。 0,1,0,0 )

どのように解決するのですか？

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

しかし、すでに多くの人が指摘しているように、W3C CSS 勧告では、"（大きな底辺を持つ数体系で）3 つの数字 a-b-c を連結すると、特異性が得られると述べています。

その結果、quot;very large base" が採用されていることがわかりました (少なくとも、最も一般的に使用されている 4 つのブラウザーで)。

これが意味するところは、0個のidと256個のクラス名で指定されたスタイルが は で指定されたスタイルが、1 つの ID で指定されたスタイルよりも優先されるということです。これを少し試してみました。

• 255クラスは ではない 1つのidを上書きするには十分ではありません。

• ...ただし256クラス は 1 つの id を上書きするには十分な数です。

• ...および256のタグ名 は 1 つの class-name を上書きするのに十分な

• ...しかし、残念ながら256のIDは ではなく であり、1 つのインライン・スタイルを上書きするには十分ではありません。 (2012/8/15更新)このような場合は !important )

つまり、事実上、ポイントシステムは存在するのですが、それは10進法ではありません。しかし、それは10進法ではありません。256進法です。その仕組みは次のとおりです。

(2 ⁸ ) ² または65536（セレクタ内のIDの数）の倍数

• (2 ⁸ ) ¹ またはセレクタのクラス名の数の256倍
• (2 ⁸ ) ⁰ または1、セレクタ内のタグ名の数の倍

これは、コンセプトを伝えるための裏技的な練習としてはあまり実用的ではありません。

そのためか、このトピックに関する記事では、10進法が使われています。

***** [Operaは2を使用 ¹⁶ (を使っています（karlcowさんのコメント参照）。他のいくつかのセレクタエンジンは 無限大 - を使うものもあります(Simon Sapinのコメント参照)。

2014年7月、更新。

Blazemongerが今年の初めに指摘したように、Webkitブラウザ（Chrome、Safari）は現在、256よりも高いベースを使用しているようです。おそらく 2 ¹⁶ Opera のような？IEとFirefoxはまだ256を使用しています。

2021年3月の更新です。

Firefoxは256を基本として使用しなくなりました。