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

CSS で子要素が親スタイルを継承できないようにする

問題:

親要素で宣言された CSS プロパティが子要素に継承されないようにする方法はありますか?たとえば、親要素のフォント サイズが 12 ピクセルの場合、その子要素がこのスタイルを継承しないようにできますか?

答え:

残念ながら、親要素からの継承を防止できる単純な CSS プロパティはありません。ただし、実装できる回避策がいくつかあります。

1. スタイルの変更を手動で元に戻す:

   継承されたスタイルを明示的に設定することで、継承されたスタイルをオーバーライドできます。子要素に必要なスタイルを指定します。例:

   div { color: green; }
   
   form div { color: red; }
   
   form div div.content { color: green; }

   ログイン後にコピー

2. マークアップに複数のクラスを追加:

   HTML マークアップにアクセスできる場合は、複数のクラスを追加できます。クラスを要素に追加して、特定のスタイルをターゲットにします。これにより、継承されたクラスからスタイルをオーバーライドできます:

   form div.sub { color: red; }
   
   form div div.content { /* remains green */ }

   ログイン後にコピー

3. All: revert プロパティを使用します (実験的):

   CSS Working Groupは、要素上のすべてのスタイルを初期値にリセットする all: revert プロパティを提案しました。これは、親要素からの継承を防ぐために使用できます:

   div.content {
     all: revert;
   }

   ログイン後にコピー

   このプロパティはまだ実験段階であり、すべてのブラウザーでサポートされているわけではないことに注意してください。

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