CSS の重みと優先度の問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

いくつかの値の比較

マージンの結合とは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。

置換可能な要素

リンク

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS の重みと優先度の問題_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

CSS の重みと優先度の問題

いくつかの値の比較

初期値

指定された値

計算された値

値を適用

CSS 属性の指定された値は、次の 3 つの方法で取得されます。

適用された値 (使用値) は、すべての計算が完了した後に最終的に使用される値です完成しました。 CSS プロパティの最終値を計算するには 3 つの手順があります。

まず、指定された値は、スタイルカスケード (スタイルシート内で最も重みが高いルールを選択する)、継承 (属性を継承できる場合は親要素の値を取得する)、またはデフォルト値から取得されます。

その後、仕様に従って計算値を計算します。

最後に、レイアウト (自動やパーセンテージなどのサイズをピクセル値に変換) を計算し、その結果が適用された値として使用されます。

これらの手順は内部で実行され、スクリプトは最終的に適用された値を取得するために window.getComputedStyle のみを使用できます。

CSS 2.0 は、属性計算の最後のステップとして計算値のみを定義します。 CSS 2.1 では、親要素の計算値がパーセンテージである場合に、子要素がその高さと幅を明示的に継承できるように、個別のアプリケーション値の定義が導入されました。レイアウトに依存しない CSS プロパティ (表示、フォントサイズ、行の高さなど) の場合、計算された値は適用された値と同じになります。それ以外の場合は異なります

優先順位

優先順位はブラウザーが決定する方法ですどの属性値と一致するか、最も関連性の高い要素が決定され、その要素に適用されます。優先順位はセレクターで構成されるマッチングルールによってのみ決定されます。

優先度は、各セレクタータイプによって形成される連結文字列に基づいて計算されます。マッチング式に対応した重みです。

優先順位が同じ場合、後の CSS が要素に適用されます。

以下は優先度の高いセレクターのリストです:

ユニバーサルセレクター(*)

要素(型)セレクター

クラスセレクター

属性セレクター

擬似クラス

ID選択

インラインスタイル

!重要なルールの例外リンク

!重要なルールがスタイル宣言に適用されると、スタイル宣言は宣言リストのどこにあるかに関係なく、CSS 内の他の宣言をオーバーライドします。ただし、!重要なルールは優先度とは関係ありません。 ! important を使用すると、スタイルシートの元のカスケードルールが変更され、デバッグが困難になるため、推奨されません。

いくつかの経験則:

サイト全体の CSS では ! important を決して使用しないでください

! important は、サイト全体または外部 CSS (参照される ExtJ や YUI など) をオーバーライドする必要がある特定のページでのみ使用してください

プラグインでは ! important

を決して使用しないでください

常に最適化するには、 ! important

の代わりにスタイルルールの優先順位を使用して問題を解決することを検討してください

! important をオーバーライドする方法

簡単です。 ! important を追加するだけです。 CSS ステートメントを作成し、それをより高い優先度のセレクターに適用します (元のベースに追加のタグ、クラス、または ID セレクターを追加します)

または、セレクターを同じに保ちますが、位置を追加する必要があります (優先度の場合)。が同じ場合、後の定義は前の定義をオーバーライドします)。

:not 擬似クラス例外

: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 倍であることを意味します。マージンのマージが発生すると、段落間の上下のマージンがマージされ、どこでも距離が一定になります。