CSS 優先度の読み方を詳しく説明します。 CSS 優先度には 4 つのレベル (テキスト内セレクター、ID セレクター、クラス セレクター、要素セレクター) と各レベルの出現数があります。 CSS の優先度は、これら 4 つのレベルの出現数に基づいて計算されます。
優先読み取りは「グループ」に分割する必要があり、グループは互いに独立しており、左から右に比較されます。これらはカンマで区切られてグループ化されて表示されます。
セレクター( a 、 b 、 c 、 d )
比較: ↑ 、 ↑ 、 ↑ 、 ↑
セレクター( a 、 b 、 c 、 d )
w3c.org の原文に示されているように、a、b、c、d の 4 つのグループに分かれており、デフォルトは 0 で、さまざまなセレクター構造と合成形式に対応しています。セレクタ間の優先度を比較する場合、左から右に 1 対 1 で比較し、比較の方が大きい場合は比較を中止できます。
li.red.level {} /* a=0 b=0 c=2 d=1 -> 特異性 = 0 , 0 , 2 , 1 */
/* ↑ 、 ↑ 、 √ を比較します */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 特異性 = 0 , 0 , 1 , 1 */
/* ↑ 、 ↑ 、 ↑ 、 √ を比較します */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 特異性 = 0 , 0 , 1 , 3 */
/* ↑ 、 ↑ 、 √ を比較します */
#x34y {} /* a=0 b=1 c=0 d=0 -> 特異性 = 0 , 1 , 0 , 0 */
/* ↑ 、 √ を比較 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0 */
(上記の表で、↑は比較がまだ必要であることを意味し、√は比較が必要であることを意味します)結果はここから得られました）。
さらに、セレクターの構造は、正しく記述されていれば、次のように優先順位だけで大まかに知ることができます。
1,0,0,0 は要素内のスタイルを示します。
0,2,1,1 は、2 つの ID セレクター、クラスまたは疑似クラスまたは属性セレクター、および要素セレクターで構成されるセレクターを表します。
CSS の優先順位ルールの詳細:
発音を修正したら、詳細なルールについて話し始めます。
グループ a の値は、style 属性に CSS が書かれている場合のみ 1 になり、それ以外の場合は 0 になります。 style に書かれた style ステートメントは実際にはセレクターではないため、ここでのグループ b、c、d の値ははすべて 0 であり、実際のセレクターのみがグループ b、c、d の値を持ちます。
b グループ値は、ID セレクター #ID、ID セレクターの数によって決定され、グループ値が累積されます。
c の値のグループはクラス、疑似クラス、および属性セレクターによって決定され、値のグループは累積されます。
d の値のグループは要素名、つまり要素セレクターによって決定され、値のグループが累積されます。
これら 4 つの値のセットは異なるタイプのセレクターに対応しており、読み取り規則に従って相互に影響を与えないことに注意してください。
!重要ですが、近接原則と継承についてはここでは説明しません。また、サンプル コードもありません。ぜひ webjx.com に来て議論してください。
以下に例をいくつか示します。 CSS 優先度の問題 CSS 優先度には 4 つのレベル (テキスト セレクター、ID セレクター、クラス セレクター、要素セレクター) と各レベルの出現数が含まれます。 CSS の優先度は、これら 4 つのレベルの出現数に基づいて計算されます。
CSS 優先度の計算ルールは次のとおりです。
* ページで定義されているスタイルに 1,0,0,0 を追加します
* 各 ID セレクター (#id など) に 0,1,0,0 を追加します。
* 各クラス セレクター (.class など)、各属性セレクター ([attribute=] など)、および各疑似クラス (hover など) に 0,0,1,0 を追加します。
* 各要素セレクター (p など) または疑似要素セレクター (firstchild など) に、0,0,0,1 を追加します。
次に、これら 4 つの数値を個別に加算して、CSS で定義された各優先度の値を取得します。
次に、左から右に少しずつサイズを比較し、数値が大きい CSS スタイルが優先されます。