web-dev-qa-db-ja.com

CSS特異性のポイント

このブログで偶然見つけた特異性の研究- http://www.htmldog.com/guides/cssadvanced/specificity/

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

例：

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

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

CSS：

#a {
    color: red;
}

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

HTML：

<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>

結果：

http://jsfiddle.net/hkqCF/

15個のクラスが100ポイントに相当する1つのIDと比較して150ポイントに相当する場合、テキストはなぜ赤色ですか

編集：

したがって、ポイントは単に合計されているのではなく、連結されているようです。詳細についてはこちらをご覧ください- http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html しかし、それはセレクターのクラス= 0,0,15,0 OR0,1,5,0？

私の直感では、IDセレクターの特異性が次のようになっていることがわかっているので、前者であることがわかります：0,1,0,0

csscss-selectorscss-specificity
121
Sam

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

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

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

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

したがって、事実上、「ポイントシステム」がありますが、10を基数とするものではありません。256を基数としています。

（28）2 または65536、セレクタ内のIDの数の倍
+（28）1 または256、セレクタ内のクラス名の数の倍
+（28） または、セレクタのタグ名の数の1倍

これは、コンセプトを伝えるための裏技の演習ではあまり実用的ではありません。
それがおそらく、このトピックに関する記事がベース10を使用している理由です。

***** [Operaは2を使用します16 （karlcowのコメントを参照）。他の一部のセレクターエンジンはinfinityを使用します—事実上ポイントシステムはありません（Simon Sapinのコメントを参照）。

2014年7月更新：
Blazemongerが今年初めに指摘したように、webkitブラウザー（クローム、サファリ）は現在256よりも高いベースを使用しているようです。おそらく216、オペラのような？ IEとFirefoxは引き続き256を使用します。

135
Faust

良い質問。

確かに言えません-私が見つけた記事はすべて、複数のクラスの例を避けています。 here -しかし、仕様の比較に関してはクラスセレクタとIDの間の場合、クラスは15のみの値で計算され、どんなに細かくても。

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

ただし、[must

.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の数字は列2の列1と同じ、列3の0を超えることはできません。これは正しいですか？

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

28
Pekka 웃

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

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

これは、値A、B、Cが互いに完全に独立していることを意味します。

15クラスは、セレクタに150の特異性スコアを与えるのではなく、[〜＃〜] b [〜＃〜]値15を与えます。単一[〜＃〜] a [〜＃〜]値はこれを圧倒するのに十分です。

比phorとして、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、c1,0,0のスコア。突然、[〜＃〜] b [〜＃〜]値が私たちの[〜＃〜] a [〜＃〜]値。セレクターレベル4のドキュメントは、制限を超えることは決してできないと述べて、その問題を完全に明らかにしています。この実装では、both255クラスと256クラスの同じA、B、cスコアは0,255,0。

ファウストの答えで与えられた問題は、その後ほとんどの最新のブラウザで修正されました。

9
James Donnelly

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

16ページの第1章には次のように記載されています。

ルールの具体性を計算するために、各タイプのセレクターには数値が割り当てられます。次に、各セレクタの値を合計することにより、ルールの特異性が計算されます。 残念ながら、特異性は基数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] より大きい [0, 0, 15, 0]基数の高いシステムで。

8
Matt Fenwick

特異性ランキングとオリンピックメダルテーブルの比較が好きです（ゴールドファースト方式-最初にゴールドメダルの数に基づいて、次にシルバー、次にブロンズに基づきます）。

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

非常に優れた特異性計算機も利用可能です こちら 。サンプル（#aおよび.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o）をそこに置いて、結果を見ることができます。

リオ2016年のオリンピックメダルテーブルの例は enter image description here

4
rkarczmarczyk

ブログの説明が正しいとは思わない。仕様は次のとおりです。

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

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

3
Matthew Wilson

私はそれを言うだろう：

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が青と言ったら、今は赤になる」

1
Sphvn