CSS の優先順位の詳細な分析を共有する

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があります。

まずCSSについて簡単に説明します。 CSSとはCascading Style Sheetsの略です。

その仕様は、インターネットの歴史の中で独特の発展段階を表しています。現在、Web ページ制作に携わっている友人であれば、CSS について聞いたことがない人はほとんどいないはずです。CSS の優先順位について話す前に、CSS が何で、何に使用されるのかを理解する必要があります。

まずCSSについて簡単に説明します。 CSSとはCascading Style Sheetsの略です。その仕様は、インターネットの歴史の中で独特の発展段階を表しています。 Webページ制作の過程でCSSを使用することが多くなった現在、Webページ制作に携わっている友人はCSSのことを聞いたことがないはずです。

第 2 に、CSS を使用してドキュメントの外観をリッチで変更しやすいように設定できるため、Web ページ制作者の作業負担が軽減され、それによって制作とポストメンテナンスのコストが削減されます。

実際のところ、CSS とは何か、CSS がどのような役割を果たしているのかについて話すのは完全に蛇足ですが、Web ページ制作に携わっている友人なら多かれ少なかれ CSS に触れたことがあると思います。

本題に戻り、今日のトピックに入りましょう:

1. CSS の優先順位とは何ですか?

いわゆる CSS 優先度は、CSS スタイルがブラウザーで解析される順序を指します。

2. CSS の優先順位ルール

スタイルには優先順位があるため、この優先順位について合意するルールがあり、この「ルール」がこの記事の焦点です。

スタイルシートの特徴は、さまざまなルールの相対的な重みを記述します。その基本ルールは次のとおりです:

1. セレクター内の ID 属性の数をカウントします。

2. セレクター内の CLASS 属性の数をカウントします。

3. セレクター内の HTML タグ名の数を数えます。

最後に、3つの数字をスペースやカンマを入れずに正しい順序で書くと、3桁の数字が得られます(CSS2.1では4桁で表されます)。 (数値を 3 桁で終わるより大きな数値に変換する必要があることに注意してください)。セレクターに対応する数値の最終リストにより、大きい数値のどの機能が低い数値の機能をオーバーライドするかを簡単に判断できます。

例:

1. 各 ID セレクター (#someid) に、0、1、0、0 を追加します。

2. 各クラスセレクター(.someclass)、各属性セレクター([attr=value]などの形式)、各疑似クラス(hoverなどの形式)に0,0,1,0を追加します。 。

3. 各要素または疑似要素(:firstchild)などに、0,0,0,1を加算します。

4. 他のセレクターには、グローバル セレクター * と 0,0,0,0 が含まれます。追加しないことに相当しますが、これも一種の特殊性であり、後述します。

3. 特性別セレクター一覧

以下は特性別セレクター一覧です。

特性値.apple {color:red;}p.bright {color: yellow;}p.明るいです.dark {color:brown;}#id316 {color: yellow}

h1 {color:blue;}

1

p em {color:purple ;}

2

10

11

22

100

上の表だけではわかりにくいと思いますが、別の表を示します。

h1 {色:ブルー;}

1.apple {color:red;}1+10=11p.bright em.dark {color:brown;}1+10+1+10=22#id316 { color: yellow} 100

上記より、HTMLタグの重みが1、CLASSの重みが10、IDの重みが100、継承の重みが0であることが簡単にわかります(後述)。

これらのルールに従って数値の文字列を少しずつ追加して最終的な重みを取得し、比較して選択するときに左から右に少しずつ比較します。

優先順位の問題は実際には競合解決の問題であり、CSS セレクターで同じ要素 (コンテンツ) が選択された場合、優先順位に応じて異なる CSS ルールを選択する必要があります。実際には多くの問題が含まれます。

そういえば、CSSの継承について話さなければなりません。

4. CSS の継承

4.1 継承のパフォーマンス

継承は CSS の主な機能であり、祖先と子孫の関係に依存します。継承は、スタイルを特定の要素だけでなくその子孫にも適用できるようにするメカニズムです。たとえば、BODY で定義された色の値は、段落のテキストにも適用されます。

スタイル定義:

body {color:#f00;}

コード例:

CSS継承のテスト

効果の例:

このコードを適用した結果は次のようになります。「CSS 継承のテスト」は赤色で表示され、本文に があるため、「継承」という単語が太字で表示されます。明らかに、このテキストは body {color:#f00;} スタイルで定義された色を継承します。これが、継承が CSS の一部である理由です。

ただし、CSS継承の重みは非常に低く、通常の要素の重みよりも低い0です。

引き続き上記のコード例を例として取り上げます: スタイル定義に次の行を追加します:

strong {color: #000;}

効果例:

color 値を に設定すると、 から継承するスタイルの色をオーバーライドできます。したがって、明示的に宣言されたルールは、その継承されたスタイルをオーバーライドできるということになります。

4.2 継承の制限

継承は CSS の重要な部分です。なぜこのようなことになるのかについて考える必要はありませんが、CSS の継承にも制限があります。

ボーダー、マージン、パディング、背景など、継承できないプロパティがいくつかあります。

スタイル定義:

p {border:1px Solid #000;}

サンプルコード:

I amborderI は継承できません

期待される効果:

実際の効果:

上記の効果から、境界線は継承できないことがわかります。他のいくつかの属性にも同じことが当てはまります。ここではそれらをリストしません。一つ。

5. 補足事項

テキスト内のスタイルの優先度は 1,0,0,0 なので、常に外部定義よりも高くなります。ここで、テキスト内スタイルは

blah

形式のスタイルを指しますが、外部定義は タグまたは

p em {color:purple;}1+1=2	10 p.bright {color: yellow;}

以上がCSS の優先順位の詳細な分析を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。