CSS スタイルの優先順位_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS のスタイル優先度について、今日もおさらいしてみましょう: CSS のスタイル優先度は 2 つの部分に分けることができます:

1. CSS コードが配置されている位置から重み優先度を見てください:

インラインスタイル & gt; 内部埋め込みスタイル 2. スタイルセレクターの重み:

重要 & gt; タグ、疑似要素

ワイルドカード

今日は、ポイント 2 - スタイルセレクターに焦点を当てましょう。 次のコードを見てください:

<!DOCTYPE html>    <head>        <title>css</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>               div.class1 {               background:pink;           }           .class2 {               background:green;           }        </style>    </head>    <body>        <div class="class1 class2" style="width:100px;height:100px;"></div>    </body></html>

ログイン後にコピー

コードを実行すると、効果は次のようになります:

はピンクです。上記の記述によると、class1 と class2 は両方ともクラスに属しているのではないでしょうか?優先順位が同じなので、次のclass2(緑)がclass1(ピンク)をカバーするはずではないでしょうか？

はい。クラスは同じレベルに属しますが、div.class1 と .class2 の優先度の重みは異なります。

以下の表を参照してください:

セレクター

体重

HTML コードを見るときは、たとえば、class1 と class2 など、そのコードが呼び出すスタイルだけを見てはいけません。上記は div タグに配置された場合、クラスこの重みの計算方法は、上の表の対応する重み値を使用し、それらを重ね合わせて最終値を取得することです。値が大きいほど重みが大きくなるため、優先度が高くなります。

!重要	1,0,0,0
ID	0 ,1,0,0
クラス、疑似クラス、属性セレクター	0,0,1,0
タグ、疑似要素	0、 0、 0 ,1
wildcard	0,0,0,0
	ですが、実際には重みが異なります。したがって、CSS スタイルを追跡し、その重みを確認します。

例えば、上記コードのclass1とclass2:

上記の重みと組み合わせると、class1とclass2の重みが得られます

class1

div(0001)+.class1(0010) )

0011

class2

= .class2(0010) = 0010 class1の重みがclass2の重みより大きいため、class1の優先度はclass2よりも高くなります。

それで、

class1 のピンク色を表示します。 セルフテストについては、いくつかのCSS式の重み値を以下に示します。 0011

li.red.level

0021

スタイルの優先順位が同じ場合はどうなりますか?あとは、出現する順番によって決まります。後に来るものが前に来るものを上書きします。はスタイルシート内の順序であり、HTML タグ内にクラスが表示される順序ではありません。は次のとおりです:

#test:not(ii)	0110
#テスト:前	0101
わかりました、	注:
	<!DOCTYPE html> <head> <title>css</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .class2 { background:green; } .class1 { background:pink; } </style> </head> <body> <div class="class1 class2" style="width:100px;height:100px;"></div> </body></html> ログイン後にコピー上記のコードを実行すると、ページには結果が緑色ではなくピンク色で表示されます。！