コミュニティ

記事 トピックス に質問

学ぶ

コース プログラミング辞典

ツールライブラリ

開発ツール 公式サイト PHP ライブラリ JS特殊効果 サイト素材 拡張プラグイン

レジャー

ゲームのダウンロード ゲームのチュートリアル

日本語

简体中文 English 繁体中文 日本語 한국어 Melayu Français Deutsch

Login

singup

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

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

Barbara Streisand

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

オリジナル

361 人が閲覧しました

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