ホームページ > 記事 > ウェブフロントエンド > CSS の重みと優先度の問題_html/css_WEB-ITnose
CSS の重みと優先度の問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:07832ブラウズ
CSS の重みと優先度の問題
いくつかの値の比較
CSS 属性の指定された値は、次の 3 つの方法で取得されます。
- 現在のドキュメントのスタイルシートでこの属性に割り当てられた値が最初に使用されます。
- 現在のドキュメントのスタイルシートでこの属性に値が割り当てられていない場合、親要素から値を継承しようとします。
- 上記 2 つのアプローチが実現できない場合は、この要素の CSS 仕様にあるこの属性の初期値を指定値として使用します
まず、指定された値は、スタイル カスケード (スタイル シート内で最も重みが高いルールを選択する)、継承 (属性を継承できる場合は親要素の値を取得する)、またはデフォルト値から取得されます。
優先順位
優先順位はブラウザーが決定する方法ですどの属性値と一致するか、最も関連性の高い要素が決定され、その要素に適用されます。優先順位はセレクターで構成されるマッチング ルールによってのみ決定されます。
優先度は、各セレクター タイプによって形成される連結文字列に基づいて計算されます。マッチング式に対応した重みです。
優先順位が同じ場合、後の CSS が要素に適用されます。
以下は優先度の高いセレクターのリストです:
ユニバーサルセレクター(*)
!重要なルールがスタイル宣言に適用されると、スタイル宣言は宣言リストのどこにあるかに関係なく、CSS 内の他の宣言をオーバーライドします。ただし、!重要なルールは優先度とは関係ありません。 ! important を使用すると、スタイルシートの元のカスケード ルールが変更され、デバッグが困難になるため、推奨されません。
いくつかの経験則:
サイト全体の CSS では ! important を決して使用しないでください! important をオーバーライドする方法
簡単です。 ! important を追加するだけです。 CSS ステートメントを作成し、それをより高い優先度のセレクターに適用します (元のベースに追加のタグ、クラス、または ID セレクターを追加します):not 否定された擬似クラスは、優先度の計算では擬似クラスとはみなされません。実際、セレクターの数を計算するとき、セレクターは通常のセレクターとしてカウントされます。 DOM ツリー内の距離を無視します
次のスタイル宣言があります:
body h1 { color: green;}html h1 { color: purple;} 次の HTML に適用される場合:
<html><body> <h1>Here is a title!</h1></body></html>
ブラウザはそれを紫色で表示します。つまり、後のものが優先されます。
マージンの結合
マージンの結合とは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。
マージンの結合は最初は少し奇妙に思えるかもしれませんが、実際には理にかなっています。たとえば、いくつかの段落で構成される典型的なテキスト ページを考えてみましょう。最初の段落の上のスペースは、段落の上マージンと同じです。マージンを結合しない場合、後続のすべての段落間のマージンは、隣接する上マージンと下マージンの合計になります。これは、段落間のスペースがページの上部の 2 倍であることを意味します。マージンのマージが発生すると、段落間の上下のマージンがマージされ、どこでも距離が一定になります。
置換可能な要素
CSS では、置換可能な要素とは、プレゼンテーションが CSS によって制御されない要素です。これらの外部要素の表現は CSS 仕様に依存しません。 典型的な置換可能な要素には、、
CSS は、マージンの計算や auto の値の処理など、置換可能な要素に対して特別な処理を実行する場合があります。
一部の (すべてではない) 置換可能な要素にはサイズとベースライン自体があり、vertical-align などの一部の CSS プロパティで使用されることに注意してください。
リンク
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。