CSS 詳細レビュー ノート -- 構造と cascading_html/css_WEB-ITnose

すべての法的文書は、構造ツリー要素、属性の兄弟要素などの祖先を使用して、要素を選択するためのセレクターを作成します。これが CSS 継承 の核心です。継承は、ある要素から子孫の要素に属性値を渡すために使用されるメカニズムです。要素にどの値を使用するかを決定するとき、ユーザー エージェントは継承だけでなく、特異性や宣言自体のソースも考慮する必要があります。このプロセスは カスケード と呼ばれます。

この記事では、特異性、継承、カスケードという 3 つのメカニズムの関係について説明します。

特殊性

同じ要素を異なる方法で選択できます。ただし、ユーザー エージェントはルールごとにセレクターの特異性を計算し、その特異性をルールの各宣言に追加します。要素に 2 つ以上の競合する属性宣言がある場合、最も高い特異性を持つ宣言が優先されます。

特異度の計算ルール:

1) セレクターで指定された各 ID 属性値に対して、0100 を追加します

2) セレクターで指定された各クラス属性値、属性選択、または疑似クラスに対して、0010 を追加します

3)セレクターで指定された個々の要素と擬似要素には、0001 を追加します

4) 結合子とワイルドカード セレクターは、特異性には何も寄与しません

重複する選択の場合、複数のルールが満たされる場合、これらのルールは累積的に計算されます。 0011 の特異性は 0001 よりも優れており、0100 は 0022 よりも優れています。これは、値が左から右に順序付けされているためです。

質問: 次のセレクターは同じ要素を指します。コンテナーの色は何にすべきですか?

div.container div.bright{background: #996699;} div.bright{background: #99CCCC;} div#id216{background: #FFFF66;} #id216{background: #CC3333;} div.container div#id216{background: #333399;}

特異性を調べてください。答えは次のとおりです: 0022、0011、0101、0100、0112

注: 実際、すべてのスタイルの競合解決は階層化によって処理されます。

これまで、0から始まる特産品だけを見てきました。一般に、最初の 0 はインライン スタイル宣言用に予約されており、他のすべての宣言よりも具体的です。

<div class ="bright" id ="id216" style="background:#003300"></div>

場合によっては、特定のステートメントが他のすべてのステートメントを上回るほど重要である場合があり、これらのステートメントの最後のセミコロンの前に挿入することが許可されます。マークすることが重要です。

りーす

スタイルシートを追加すると！ important の場合、インライン競合スタイルは無効となり、重要なスタイルが優先されます。

継承

継承メカニズムに基づいて、スタイルは指定された要素だけでなく、その子孫要素にも適用されます。

一般に、ほとんどのボックス モデル プロパティ (マージン、パディング、背景、境界線を含む) は継承できません。その理由は、これらのプロパティが継承されるとドキュメントがさらに混乱するためです。

継承された値には特別性がまったくなく、特別性が 0 ですらない。 (専門性 0 は専門性がないより強いです)

ワイルドカード セレクターを無差別に使用する場合に考えられる問題の 1 つは、ワイルドカード セレクターはどの袁術にも一致する可能性があるため、継承を短絡する効果があることがよくあることです。

カスケード

等しい特異性を持つ 2 つのルールが同時に同じ要素に適用される場合、ブラウザは カスケード を通じて競合を解決します。

CSS のベースとなるアプローチは、スタイルをすべてにカスケードすることであり、これは継承と特異性の組み合わせによって行われます。カスケード ルール:

1) 特定の要素に一致するセレクターを含む関連ルールをすべて検索します。

2) この要素に適用されるすべての宣言を明示的な重みで並べ替えます。 ! important フラグのあるルールは、 ! important フラグのないルールよりも重みが高くなります。発言の重みは5段階を考慮しています: (重みの大きい順)

1. 読者からの重要な発言

2. クリエイティブスタッフからの重要な発言

3. クリエイティブスタッフからの通常の発言

4. 通常の発言読者より

5. ユーザーエージェント宣言

3) 特定の要素に適用されるすべての宣言を特異性によって並べ替えます。特異性が高い要素は、特異性が低い要素よりも大きな重みを持ちます。

4) 特定の要素に適用されるすべての宣言を出現順に並べます。宣言がスタイル シートまたはドキュメント内で後から現れるほど、その重みは大きくなります。 。スタイル シート内にインポートされたスタイル シートがある場合、一般に、インポートされたスタイル シートにある宣言が最初に来て、メイン スタイル シート内のすべての宣言が最後に来ると考えられます。

注: マルチクラス セレクターは、異なるクラス名をスペースで区切りますが、カスケードの規則に従って、要素内のクラスの順序は関係ありませんが、スタイル シートの位置に関係します。宣言。

#id216{ background: #990033 !important;}

赤、青、黄色は、競合する背景色属性を設定します。ただし、ボックスによって表示される最終的な色は、HTML 内のこれら 3 つのクラスの順序とは関係ありません。宣言スタイルシートは次のとおりです。

<div class = "box red blue yellow"></div>

ボックスによって表示される最終色は宣言の順序に関係しており、最終表示は青色の背景色です。