`html`、`body`、およびユニバーサル セレクター (*) は CSS セレクターの優先順位においてどのように異なりますか?

CSS セレクターの優先順位: html、本文、およびユニバーサル セレクター* (更新)

疑問が生じます: 3 つのルールはどのような場合に異なるのか同じ HTML ドキュメントに適用されますか?これらのセレクターの特有の効果を調べてみましょう: html、body、およびユニバーサル セレクター *.

html セレクター:

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}

このルールは、色と背景のスタイルを要素。その子孫は色を継承しますが、

を含む背景は継承しません。要素。 要素にはデフォルトの背景がないため、透明になり、 が表示されます。

ビューポート全体をカバーしているにもかかわらず、要素の背景は自動的に高さを拡張しません。

ボディ セレクター:

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}

このルールは、色と背景のスタイルを

に適用します。要素。すべての子孫はその色を継承します。

と同様です。背景、

背景は自動的に に伝播されます。明示的にオーバーライドされない限り、要素。したがって、単一の背景を使用する場合は、それを のいずれかに配置します。または

ただし、 の背景スタイルを組み合わせると、大きな違いは生じません。そして

ここで示すように、独自の効果を生成できます。

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

<pre class="brush:php;toolbar:false">color: black;
background-color: white;

}
pre>

このルールはすべての要素に影響し、暗黙的な継承を無効にします。ただし、これは などの他のルールによって簡単にオーバーライドされます。そして

ユニバーサル セレクターを使用して継承を解除することは、影響を受けるすべてのプロパティの継承チェーンが中断される可能性があるため、絶対に必要な場合 (通常は特定の分離された要素の場合) を除き、一般的に推奨されません。

以上が`html`、`body`、およびユニバーサル セレクター (*) は CSS セレクターの優先順位においてどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。