最近、CSS の優先順位についてより詳しく説明されているブログを見つけました。インターネット上に関連記事がありますが、参考までに再投稿します。
CSS 優先度の読み方を詳しく説明します。 CSS 優先度には 4 つのレベル (テキスト内セレクター、ID セレクター、クラス セレクター、要素セレクター) と各レベルの出現数があります。 CSS の優先度は、これら 4 つのレベルの出現数に基づいて計算されます。
以下引用：【GOVOブログより転載】
優先読み取りは「グループ」に分割する必要があり、グループは互いに独立しており、左から右に比較されます。これらはカンマで区切られてグループ化されて表示されます。
ソースコードの例
[www.downcodes.com]セレクター( a 、 b 、 c 、 d )
比較: ↑ 、 ↑ 、 ↑ 、 ↑
w3c.org の原文に示されているように、 selector( a , b , c , d ) は 4 つのグループ a、b、c、d に分割されます。すべて正の整数であり、デフォルトは 0 で、異なるセレクターに対応します。構造と組成物が形成されます。セレクタ間の優先度を比較する場合、左から右に 1 対 1 で比較し、比較の方が大きい場合は比較を中止できます。
ソースコードの例
[www.downcodes.com] 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 つの値のセットは異なるタイプのセレクターに対応しており、読み取り規則に従って相互に影響を与えないことに注意してください。
!重要ですが、近接原則と継承についてはここでは説明しません。またサンプル コードもありませんので、どなたでも W3Cbbs.com に来て議論してください。
以下に例を示します: CSS の優先順位の問題
CSS の優先度には、4 つのレベル (テキスト セレクター、ID セレクター、クラス セレクター、要素セレクター) と各レベルの出現数が含まれます。 CSS の優先度は、これら 4 つのレベルの出現数に基づいて計算されます。
CSS 優先度の計算ルールは次のとおりです。
ソースコードの例
[www.downcodes.com] * ページで定義されているスタイルに 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 スタイルが優先されます。
例：
css ファイルまたは次のように定義された <style>:
ソースコードの例
[www.downcodes.com] 1. h1 {色: 赤;}
/* 要素セレクター、結果は 0,0,0,1 */
2. body h1 {色: 緑;}
/* 2 つの要素セレクター、結果は 0,0,0,2 です */
3. h2.grape {色: 紫;}
/* 要素セレクターとクラス セレクター、結果は 0,0,1,1*/
4. li#answer {カラー: ネイビー;}
/* 要素セレクター、ID セレクター、結果は 0,1,0,1 です */
要素の style 属性は次のように定義されます。
ソースコードの例
[www.downcodes.com] h1 {色: 青;}
/* ページ内で定義されている要素セレクター、結果は 1,0,0,1 です*/
注: ここではすべての数値が重ね合わされています ((0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1) ,0,0,1)=(1,1,1,6)
それ以降、h1 要素の色は青になります。
知らせ：
1. ! important で宣言されたスタイルが最も優先されます。競合がある場合は再計算されます。
2. 優先順位が同じ場合は、最後に表示されるスタイルを選択します。
3. 継承されたスタイルの優先順位が最も低くなります。
