css詳細復習ノート——構造と積層

合法的なドキュメントごとに構造ツリーが生成され、構造ツリー要素の祖先、属性兄弟要素などがセレクタを作成して要素を選択します.これはCSS継承の核心です.継承は、1つの要素から子孫要素に属性値を渡すメカニズムです.1つの要素に対してどの値を使用するかを考慮すると、ユーザーエージェントは継承だけでなく、特殊性も考慮し、宣言自体のソースも考慮する必要があります.このプロセスを積層と呼びます.
本稿では,特殊性,継承,積層の3つのメカニズム間の関連について論じる.
 
とくしゅせい
同じ要素は、異なる方法で要素を選択できます.ただし、各ルールでは、ユーザーエージェントがセレクタの特殊性を計算し、ルールの個々の宣言にこの特殊性を追加します.1つの要素に2つ以上の競合する属性宣言がある場合、最高の特殊性の宣言が勝つ.
特殊性計算規則:
1)セレクタで与えられた各ID属性値に対して、0100を加算する
2)セレクタで与えられた各クラス属性値に対して、属性選択または擬似クラスに0010を加える
3)セレクタで与えられた各要素と疑似要素に対して、0001を加える
4)結合子と共通選択器は特殊性に何の貢献もしない
重複する選択の場合、複数のルールに一致する場合、これらのルールは計算されます.0011特殊性は00010100より0022より優れている.これは、値が左から右に並べ替えられているためです.
テーマ:次のセレクタは同じ要素を指しています.コンテナの色は何色ですか.

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

特殊性を考察し、答え#33399;特殊性はそれぞれ:00220011010101000112
 
注意:特殊性は衝突を解決するすべてではありません.実際には、すべてのスタイルの衝突の解決は積層で処理されます.
これまで0で始まる特殊性を見たことがない.一般的に、最初の0はインラインスタイル宣言のために保持され、他のすべての宣言よりも特殊性が高い.

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

ある宣言は、他のすべての宣言を超えて重要であり、これらの宣言の終了セミコロンの前に挿入できる場合があります.importantマーク.

#id216{ background: #990033 !important;}

スタイルシートが増設されると!importantの場合、インライン競合スタイルは無効になり、importantに準拠します.
 
継承
継承メカニズムに基づいて、スタイルは指定した要素だけでなく、その子孫要素にも適用されます.
一般に、枠モデルのプロパティ(外側、内側、背景、枠線を含む)の多くは継承できません.これは、これらのプロパティが継承されると、ドキュメントがより混乱するためです.
継承された値には特殊性はなく、0特殊性もありません.(0特殊性は無特殊性より強い)
パスセレクタを区別なく使用すると存在する可能性のある問題の1つであり、袁術にマッチングできるため、パスセレクタは短絡的に継承される効果があることが多い.
 
せきそう
特殊性が等しい2つのルールが同じ要素に同時に適用されると、ブラウザはこの競合を積層して解決します.
cssに基づいた方法は,継承と特殊性を組み合わせてスタイルをすべてに積層することである.積層ルール:
1)指定された要素に一致するセレクタを含むすべての関連ルールを特定します.
2)要素に適用されたすべての宣言を明示的な重みで並べ替えます.ロゴ!importantのルールの権利はないより重要です!importantフラグのルール.宣言ウェイトはレベル5を考慮します:(ウェイトは小さい順に大きくなります)
　　　　1.読者の重要な声明
　　　　2.クリエイターの重要な声明
　　　　3.クリエイターの通常の声明
　　　　4.読者の正常な声明
　　　　5.ユーザーエージェント宣言
3)特定の要素に適用されたすべての宣言を、特定の条件でソートします.より高い特殊性を持つ要素権は、より低い特殊性を持つ要素よりも重要である.
4)指定された要素に適用されるすべての宣言順序を出現順序で指定します.スタイルシートまたはドキュメントに宣言が表示されるほど、彼の重みが大きくなります.スタイルシートにインポートされたスタイルシートがある場合は、インポートされたスタイルシートに表示される宣言が前で、メインスタイルシートに表示されるすべての宣言が後であると考えられます.
 
注意:複数のクラス選択子は、異なるクラス名をスペースで分割しますが、要素内のクラスの順序は、積層規則によっては関係なく、スタイルシートで宣言された位置に関係します.

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

redとblueとyellowは衝突する背景色の属性を設定しますが、boxが最終的に表示する色はhtmlの3つのクラスの順序とは関係ありません.宣言スタイルシートは次のとおりです.

.red{background: red;}
.yellow{background: yellow;}
.blue{background: blue;}

boxが最終的に表示する色は宣言の順序で関係し、最終的にはblue背景色として表示されます.