子要素が親の CSS スタイルを継承しないようにできますか?

子要素が親 CSS を継承しないようにする

元の問い合わせ

スタイルの継承を防ぐために CSS を変更できますか?親要素から子要素へ?

包括的回答

残念ながら、子要素が親からスタイルを継承しないようにする簡単な CSS プロパティはありません。継承プロパティを使用すると、親要素から子要素に値をコピーできますが、逆方向に相当するものはありません。

代替ソリューション

継承されたスタイルをオーバーライドするには、次のようにします。 CSS コードでそれらを手動で元に戻す必要があります:

div {
  color: green;
}

form div {
  color: red;
}

form div div.content {
  color: green;
}

あるいは、マークアップを制御できる場合は、追加のクラスを使用して特定の要素をターゲットにすることができます:

form div.sub {
  color: red;
}

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

将来の可能性

CSS ワーキング グループは、この問題の解決策を検討しています。提案されたプロパティ revert を使用すると、継承されたスタイルをリセットし、要素独自の計算スタイルに戻すことができます:

div.content {
  all: revert;
}

2015 年 3 月の時点で、このプロパティは Safari と IE を除くすべての主要なブラウザに実装されています。角。ただし、プロパティ名は元に戻すために変更されました。

以上が子要素が親の CSS スタイルを継承しないようにできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。