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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Barbara Streisand

Nov 28, 2024 pm 12:06 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

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