130

特異性の研究 私はこのブログに出くわしました - 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>

1ID が 100 ポイントに等しいのに対し、15 クラスが 150 ポイントに等しいのにテキストが赤いのはなぜですか?

どうやらポイントは合計されただけではありません。それらは連結されています。詳細については、こちらをご覧ください - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

これは、セレクターのクラスが0,0,15,0ORということ0,1,5,0ですか?

（IDセレクターの特異性が次のように見えることを知っているので、私の本能は前者であると私に言います0,1,0,0:)

4

7 に答える 7

142

Pekka の答えは事実上正しく、おそらくこの問題について考える最良の方法です。

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

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

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

つまり、事実上、「ポイント システム」がありますが、それは 10 進法ではなく、256 進法です。仕組みは次のとおりです。

(2 8 ) 2または 65536 に、セレクター内の ID の数を掛けた値

  • (2 8 ) 1または 256 に、セレクター内のクラス名の数を掛けた値
  • (2 8 ) 0または 1 に、セレクター内のタグ名の数を掛けた値

これは、概念を伝えるための封筒の裏側の演習ではあまり実用的ではありません。
それがおそらく、このトピックに関する記事が基数 10 を使用している理由です。

***** [Opera は 2 16を使用します(karlcow のコメントを参照)。他のいくつかのセレクター エンジンは無限を使用します— 実質的にポイント システムはありません (Simon Sapin のコメントを参照してください)。

更新、2014 年 7 月:
Blazemonger が今年初めに指摘したように、Webkit ブラウザー (Chrome、Safari) は現在、256 よりも高い基数を使用しているようです。おそらく、Opera のように2 16ですか? IE と Firefox は引き続き 256 を使用します。

更新、2021 年 3 月:
Firefox はベースとして 256 を使用しなくなりました。

于 2012-08-13T12:44:01.563 に答える
30

良い質問。

確かなことは言えません-私が見つけることができたすべての記事は、たとえばここなど、複数のクラスの例を避けています-しかし、クラスセレクターと 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

これは、非常に大きな (定義されていない?) ベースを持つ番号付けシステムです。

私の理解では、ベースが非常に大きいため、列 4 の数値は列 3 の数値 > 0 を超えることはできず、列 2、列 1 についても同じです....これは正しいですか?

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

于 2010-05-11T08:28:59.973 に答える
9

現在のセレクター レベル 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,1と表すことができます。親に 15 人の子がいる場合、突然別の親 ( 1,2,0 )になることはありません。これは、子供が 1 人しかいない場合よりも、親の責任が非常に大きいことを意味します ( 1,1,15 )。;)

同じドキュメントには、次のようにも書かれています。

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

これは、 Faust の回答で提示された問題に対処するために追加されました。これは、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を持ちます。

Faust の回答で与えられた問題は、それ以来、ほとんどの最新のブラウザーで修正されています。

于 2016-03-14T16:56:14.913 に答える
8

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

第1章、16ページには次のように書かれています。

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

（私の強調）と

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

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

多くの場合、基数 10 で計算を行うことができますが、すべての列の値が 10 未満の場合に限られます。

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

于 2012-02-16T19:01:41.570 に答える
3

ブログの説明が正しいとは思えません。仕様は次のとおりです。

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

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

于 2010-05-11T08:44:50.397 に答える
1

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

Element < Class < ID

それが同じものの倍数である場合、あなたが得るものに応じてそれらは積み重なるだけだと思います。したがって、クラスは常に要素とIDを常にクラスの上に上書きしますが、4つの要素のうち、3つが青、1つが赤のどちらに下がると、青になります。

例えば：

.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つが青だとしたら今は赤くなる」

于 2010-05-11T08:38:09.907 に答える