ホームページ > 記事 > ウェブフロントエンド > CSS の詳細: CSS スタイルの重みの計算と理解 (CSS スタイル オーバーライド ルール)_html/css_WEB-ITnose
CSS の詳細: CSS スタイルの重みの計算と理解 (CSS スタイル オーバーライド ルール)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:52:261184ブラウズ
この記事では、CSS Specificity、つまり CSS スタイル セレクターの重み計算について詳しく説明します
セレクターの重みを計算することにより、最終的にどのセレクターが他のセレクターのスタイル設定を優先するかが決定されます。それは「優先ルール」です！
まず、簡単な例を見てみましょう:
<body> <ul id="summer-drinks"> <li class="favorite">First section</li> <li>Second section</li> <li>Third section</li> </ul></body>
スタイルを設定します:
<style> ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } .favorite { color: red; font-weight: bold; }</style> スクリーンショット:
次に確認しますその効果は私たちが望んでいたものではないことがわかりましたはい、お気に入りの列のテキストが赤く太字になりません。ここで何か予期せぬことが起こっていることに注意してください:
ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } 2 つの異なる CSS セレクターが同時に発生しています。テキストの色とフォントの太さは設定されており、フォント サイズのみが一度宣言されるため、効果が明確にわかります。 「競合」の場合、ブラウザーは最終的にどのセレクター スタイルを有効にするかを選択する必要があります。これは、次の一連の標準固有 (つまり、重みの優先順位) ルールにもつながります
CSS スタイル セレクターの優先順位の「値」を計算します
まず実際のセレクターのロールプレイ優先順位を見てみましょう:
ここ画像を設定します:
1. 要素にインライン スタイルがある場合、そのインライン スタイルに 1000 ポイントを与えます。 例: a185ea578869545b63f653d964d8f4b3
2. ID ごとに。 、例: #div
3. 各クラス、疑似クラス (擬似クラス)、または属性セレクターに対して、0010 ポイントを与えます、例: .classes、[属性]、および: hover , :focus
4. 特定のタグ要素の参照と疑似要素 (擬似要素) ごとに、0001 ポイントを与えます。 例: :before と :after
ここでの数値は、一般的な数のカウントと考えることができます。 0100 などは 100 とみなすことができますが、以下では 0100 の代わりに画像点が使用されます。
例 1:
例2:
body.ie7 .col_3 h2~h2例3:
#footer *:not(nav) li
注: " :not( ) 「それ自体には重量値はありません (ここでの重量値は 0100 など、上記の数字を指します)。括弧内の値のみが重量値を持ちます。 例 4:
li style="color:red;">例 5:
ul > li ul li ol li:first-letter
例6: A:
div#demo{background-image:url(n.gif);}
B:
div[id="demo"]{background-image:url(n.gif )}
コード:
<!DOCTYPE html><html> <head> <style> div{ height:100px; width:100px; } div#demo{ background:red; } div[id="demo"]{ background:green; } </style> </head> <body> <div id="demo"></div> </body></html>
スクリーンショット:
ここで、ケース A の重みがケース B の重みよりも少し高い、つまり、ID セレクターの重みがケース B よりも高いことが確認できます。属性セレクターの重み
重要な注意事項:
1. * セレクターには重み値がありません。 もちろん、その重み値を 0000 ポイントに設定できます
2. 疑似要素の重みを設定します (for例: " :first-line ") 値は 0001 ポイント、疑似クラスの重み値は 0010 ポイントに設定されます
3. 疑似クラス自体の「:not()」は重み値をカウントしませんが、ただし、括弧内の重みの値はそれに応じて設定されます
4. " ! important " はより高度で、その重みはインライン スタイルのスタイルよりも高くなります。 もちろん、そのスタイル設定はインライン スタイルのスタイルをオーバーライドできます。同じ「! important」を使用して、前の「! important」をオーバーライドする異なるスタイルを設定します。 ! important」 (同じセレクターが同じスタイル ファイル内で複数回スタイルを宣言すると、後で宣言されたスタイルがそのスタイルをオーバーライドすることを知っておく必要があります)ここで、「! important」の重み値を 10000 ポイントに設定することもできます
5. ID セレクターの重みは、属性セレクターの重みよりも少し高くなります。 例: 上記の例 6 と同様です。
参考記事:
Specifics on CSS Specificity by Chris Coyier
Vitaly Friedman's CSS Specificity: Things You Should Know
この時点でCSSセレクター設定スタイルの優先順位の計算は終わりです、文章が下手なら。 、コメントに追加できます~~
ありがとう~~