CSS で子要素の継承を防ぐにはどうすればよいですか?

CSS での子要素の継承の防止

CSS の領域では、継承は親要素のスタイルに基づいて子要素のスタイルを定義する際に重要な役割を果たします。ただし、この継承をオーバーライドして子要素のスタイルを個別にカスタマイズしたい場合があります。

継承の問題

次の HTML 構造を考慮してください:

<div>

この CSS の場合:

form div {font-size: 12px; font-weight: bold;}

通常、テキスト ブロック「段落のコンテンツ」と「スパンのコンテンツ」は、親フォームからフォント サイズと太さを継承します。

継承の防止

手動でスタイルを戻す:

継承をオーバーライドする方法の 1 つは、子要素のスタイルの変更を手動で戻すことです:

div {color: green;}

form div {color: red;}

form div div.content {color: green;}

複数のクラスの追加:

マークアップを制御できる場合は、特定の要素をターゲットとするクラスを追加できます:

form div.sub {color: red;}

form div div.content {/* Remains green */}

将来の解決策: revert Property

CSS ワーキング グループは現在、revert プロパティを検討しています。

div.content {
  all: revert;
}

このプロパティを使用すると、子要素で継承されたすべてのスタイルを明示的にリセットできます。 2023 年 4 月の時点で、ほとんどの最新のブラウザー (Safari と Internet Explorer/Edge を除く) は、revert プロパティをサポートしています。

以上がCSS で子要素の継承を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。