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

CSS の継承とオーバーライド

特定の状況では、子要素が親要素から継承したスタイルを継承しないようにする必要がある場合があります。これを実現するための特定の CSS プロパティはありませんが、スタイルの変更を手動で元に戻したり、追加のクラスを追加してより具体的なスタイルを定義したりすることは可能です。

たとえば、次の HTML と CSS を考えてみましょう:

HTML:

 <div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

通常の状況では、テキスト ブロック「段落のコンテンツ」と「スパンのコンテンツ」は親の「form div」要素からフォントのサイズと太さを継承し、両方のテキストが太字で 12 ピクセルになります。

この継承と制限を防ぐにはスタイルを「段落の内容」のみに変更した場合は、スタイルの変更を手動で元に戻すことができます。

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

あるいは、可能であれば、マークアップに追加のクラスを追加することもできます。より正確なスタイルを提供します:

最新のブラウザの最近のバージョンでは、特定の要素の継承を明示的に元に戻す「revert」プロパティがサポートされるようになりました:

div.content {
  all: revert;
}

これにより、より簡潔で柔軟な設定が可能になります。スタイルのオーバーライド。