CSS の詳細: CSS スタイルの重みの計算と理解 (CSS スタイルオーバーライドルール)_html/css

CSS の詳細: CSS スタイルの重みの計算と理解 (CSS スタイルオーバーライドルール)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:26

オリジナル

1222 人が閲覧しました

この記事では、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 ポイントを与えます。例:

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);}

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セレクター設定スタイルの優先順位の計算は終わりです、文章が下手なら。、コメントに追加できます~~

ありがとう~~