CSS の特異性はどのように計算されますか?
P粉823268006
2023-08-23 09:46:01
<p>特異性について調査しているときに、このブログに出会いました - http://www.htmldog.com/guides/cssadvanced/specity/ </p>
<p>特異性は CSS のスコアリング システムであると述べられています。要素値が 1 ポイント、クラス値が 10 ポイント、ID 値が 100 ポイントであることがわかります。さらに、これらのスコアが合計され、合計スコアがセレクターの特異性になると言われます。 </p>
<p>例: </strong> </p>
<ブロック引用>
<p><strong>ボディ</strong> = 1 ポイント</p><p>
<strong>body .wrapper</strong> = 11 ポイント</p><p>
<strong>body .wrapper #container</strong> = 111 ポイント</p>
</blockquote>
<p>これらのスコアを使用すると、次の CSS と HTML によってテキストが青になると予想されます。 </p>
<p>
<pre class="ブラシ:css;ツールバー:false;">#a {
赤色;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
青色;
}</pre>
<pre class="brush:html;toolbar:false;"><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">
これは青色のはずです。
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></pre>
</p>
<p>15 クラスが 150 ポイント、1 ID が 100 ポイントに等しいのに、テキストが赤色になるのはなぜですか? </p>
<p>明らかに、これらのスコアは単に合計されるだけではなく、関連しています。詳細については、こちらをご覧ください - http://www.stuffandnonsense.co.uk/archives/css_specity_wars.html </p>
<p>これは、セレクターのクラス = <code>0,0,15,0</code> または <code>0,1,5,0</code> ということですか? </p>
<p>(私の直感では、ID セレクターの特異性が次のようなものであることがわかっているので、前者であるはずだと思います: <code>0,1,0,0</code>)</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃良い質問。
よくわかりません - 私が見つけた記事はすべて、ここ のような複数のクラスの例を避けています - しかし、比較の特異性に関しては クラス セレクター間のものであると推測しています。および ID の場合、クラスは、それがどれほど詳細であっても、値 15
これは、特定の性的行動に関する私の経験と一致しています。にのみ評価されます。
ただし、にはクラスのスタックが必要です。なぜなら リーリー ＃＃＃比較する＃＃＃ リーリー より具体的に言うと、私の唯一の説明は、スタックされたクラスの特異性は、ID に対してではなく、相互に対してのみ計算されるということです。
更新: なんとなく分かりました。これはポイント制ではないため、クラスの重みが 15 ポイントであるという情報は誤りです。これは 4 つの部分から成る番号付けシステムについて非常によく説明されており、
ここで見つけることができます。 開始点は 4 つの数字です: リーリー W3C の特異性の説明によると、上記のルールの特異性の値は次のとおりです。
リーリーこれは、非常に大きな (未定義?) 基数を持つ番号付けシステムです。
私の理解では、基数が非常に大きいため、列 4 の数値は列 3 の 0 より大きい数値を超えることはできず、列 2 にも同じことが当てはまり、列 1 にも同じことが当てはまります。この理解は正しいでしょうか? 数学をよく理解している人がこの番号付けシステムと、個々の要素が 9 より大きい場合に 10 進数に変換する方法を説明できるかどうか疑問に思いました。
Pekka の答え は実際には正しく、おそらくこの質問について考える最良の方法です。
ただし、多くの人がすでに指摘しているように、W3C CSS 勧告には、「(大基数体系の) 3 つの数値 a-b-c を連結すると、具体性が得られます。」と記載されています。は。
この標準アルゴリズムを実装する「非常に大きなベース」(少なくとも 4 つの最も一般的に使用されるブラウザでの)は 256 または 28 であることが判明しました。 これは、0 個の ID と 256 個のクラス名で指定されたスタイルは、1 個の ID のみで指定されたスタイルをオーバーライドすることを意味します。いくつかのフィドルでテストしました:
- 255 クラス名では 1 つの ID をカバーするには不十分です
- ...ただし、1 つの ID をカバーするには 256 のクラス名で十分です
- ...256 個のタグ名で 1 つのクラス名をカバーできます
- ...しかし、残念ながら、256 個の ID では 1 つのインライン スタイル
(2をカバーするには不十分です (2012/8/15 更新 -- !重要 ## を使用する必要があります) #)
したがって、実際には「ポイントシステム」がありますが、それは10進数ではなく、256進数に基づいています。その仕組みは次のとおりです:8
)2 または 65536、セレクター内の ID の数を乗算した値 (2
8)- 1 または 256、セレクター内のクラス名の数を乗算した値
(28
)- 0 または 1、セレクター内のタグ名の数を乗算した値
これは、単純な概念のコミュニケーションにはあまり現実的ではありません。
おそらくこれが、このトピックに関する記事で常に 10 進数ベースのシステムが使用されている理由です。
***** [Opera は 2
を使用します (karlcow のコメントを参照)。他の一部のセレクター エンジンは16
infinity を使用します。実際にはポイント システムはありません (Simon Sapin のコメントを参照)。 ] 2014 年 7 月更新:
今年初めに Blazemonger が指摘したように、Webkit ブラウザ (Chrome、Safari) は現在、256 よりも高いベースを使用しているようです。 Opera のような 216 でしょうか? IE と Firefox は依然として 256 を使用します。
2021 年 3 月更新:
Firefox は 256 をベースとして使用しなくなりました。