コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > `html`、`body`、およびユニバーサルセレクター (*) は CSS セレクターの優先順位においてどのように異なりますか?

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

Barbara Streisand

リリース： 2024-11-28 12:06:16

オリジナル

317 人が閲覧しました

How Do `html`, `body`, and the Universal Selector (*) Differ in CSS Selector Precedence?

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

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

html セレクター:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

ログイン後にコピー

}

このルールは、色と背景のスタイルを要素。その子孫は色を継承しますが、を含む背景は継承しません。要素。要素にはデフォルトの背景がないため、透明になり、が表示されます。

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

ボディセレクター:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

ログイン後にコピー

}

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

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

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

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

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

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">color: black;
background-color: white;

ログイン後にコピー

}

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

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

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

ソース：php.cn

前の記事：CSS を使用して 2 列のテキストレイアウトを自動的に作成するにはどうすればよいですか? 次の記事：レスポンシブ Web デザインに最適な CSS メディアクエリブレークポイントは何ですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事