ホームページ > 記事 > ウェブフロントエンド > CSS スタイルの優先順位_html/css_WEB-ITnose
CSS スタイルの優先順位_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:35977ブラウズ
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> コードを実行すると、効果は次のようになります:
以下の表を参照してください:
セレクター
体重
| !重要 | 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
=
div(0001)+.class1(0010) )=
0011
class2
= .class2(0010) = 0010 class1の重みがclass2の重みより大きいため、class1の優先度はclass2よりも高くなります。
それで、a31faf8676bc09ac87fbe61f615a7bdeclass1 のピンク色を表示します。 セルフテストについては、いくつかのCSS式の重み値を以下に示します。 0011
li.red.level
0021
| #test:not(ii) | 0110 |
| #テスト:前 | 0101 |
| わかりました、 | スタイルの優先順位が同じ場合はどうなりますか?あとは、出現する順番によって決まります。後に来るものが前に来るものを上書きします。注: | はスタイルシート内の順序であり、HTML タグ内にクラスが表示される順序ではありません。
<!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>
|
|