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. 特性別に分類されたセレクターの一覧
以下は、特性別に分類されたセレクターの一覧です:
上の表だけでは、理解しにくいように思えますが、ここに別の表があります。
上記より、HTMLタグの重みは1、CLASSの重みは10、IDの重みは100、継承の重みは0であることが容易にわかります(後述)。
これらのルールに従って数字の列を少しずつ加算して最終的な重みを取得し、比較して選択するときに左から右に少しずつ比較します。
優先順位の問題は実際には競合解決の問題であり、CSS セレクターで同じ要素 (コンテンツ) が選択された場合、優先順位に応じて異なる CSS ルールを選択する必要があります。
そう言えば、CSSの継承の話もしなくてはなりません。
4. CSS の継承
4.1 継承のパフォーマンス
継承は CSS の主な機能であり、祖先と子孫の関係に依存します。継承は、スタイルを特定の要素だけでなくその子孫にも適用できるようにするメカニズムです。たとえば、BODY で定義された色の値は、段落のテキストにも適用されます。
スタイル定義:
コード例:
効果例:
このコードの適用結果は次のとおりです: 「CSS 継承テスト」 この段落は赤字で、「継承」 いくつかの単語は太字ですタグが適用されているため。明らかに、このテキストは body {color:#f00;} スタイルで定義された色を継承します。これが、継承が CSS の一部である理由です。
しかし、CSS継承の重みは非常に低く、通常の要素の重みよりも低い0です。
引き続き上記のコード例を例として取り上げます: スタイル定義に行を追加します:
効果の例:
継承元のスタイルの色をオーバーライドするには、色の値を追加するだけでよいことがわかります。したがって、明示的に宣言されたルールは、その継承されたスタイルをオーバーライドできるということになります。
4.2 継承の制限
継承は CSS の重要な部分です。なぜこのようなことになるのかを考える必要すらありませんが、CSS の継承にも制限があります。
border、margin、padding、background など、継承できないプロパティがいくつかあります。
スタイル定義：
サンプルコード：
期待される効果：
実際の効果：
上記の効果から、 b 秩序は継承できません。ここにリストされていない他のいくつかの属性については true です。
5. まとめ
セレクターの優先順位: #id(id selector)>.class(class selector)>Tag selector
タグ#id >#id タグ .class>.class
ポインタが具体的であるほど、優先度が高くなります。
4 つの引用方法の優先順位:
インライン > 埋め込み > 外部スタイル 外部スタイルでは、リンク スタイルかインポートされたスタイルかに関係なく。先に紹介したものよりも後に紹介したものの方が優先されます。
