HTML 要素のスタイル設定において、`html`、`body`、およびユニバーサル セレクターはどのように異なりますか?

html、body、ユニバーサル セレクターを使用した HTML 要素のスタイル設定の違いを調べる

CSS セレクターを詳しく調べると、不一致が見つかる可能性があります。同じ HTML ドキュメントに適用された場合の動作。これらの違いを調べるために、次のシナリオを検討してみましょう。

1. html セレクター:

html {
  color: black;
  background-color: white;
}

このセレクターは、最も外側の html 要素のスタイルを設定します。その color プロパティを継承し、そのすべての子孫は、body 要素を含む黒のテキストを継承します。ただし、background-color プロパティは継承されないため、明示的に設定しない限り、body 要素のデフォルトの透明な背景は表示されたままになります。特に、HTML 要素の背景色は、高さを完全に拡張していないにもかかわらず、ビューポートを埋め尽くしています。

2. body セレクター:

body {
  color: black;
  background-color: white;
}

body 要素にスタイルを適用すると、その子孫すべてに直接影響します。以前と同様に、すべての要素は color プロパティを継承します。さらに、html に背景が定義されるまで、body 要素の背景色が html 要素に伝播されます。したがって、ほとんどの場合、背景のスタイル設定に最初のルールが使用されるか 2 番目のルールが使用されるかは、実質的な違いはほとんどありません。

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

* {
  color: black;
  background-color: white;
}

ユニバーサル セレクターはすべての要素に影響を与え、色と背景色の両方の継承チェーンを壊します。このルールは、より具体的なセレクターによってオーバーライドできます。特定のシナリオではその使用が有益ですが、ユニバーサル セレクターを介して継承を破ることは、絶対に必要な場合を除き、一般的に推奨されません。

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