CSS の継承とオーバーライド
特定の狀況では、子要素が親要素から継承したスタイルを継承しないようにする必要がある場(chǎng)合があります。これを?qū)g現(xiàn)するための特定の CSS プロパティはありませんが、スタイルの変更を手動(dòng)で元に戻したり、追加のクラスを追加してより具體的なスタイルを定義したりすることは可能です。
たとえば、次の HTML と CSS を考えてみましょう:
HTML:
<body>
<div>
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
通常の狀況では、テキスト ブロック「段落のコンテンツ」と「スパンのコンテンツ」は親の「form div」要素からフォントのサイズと太さを継承し、両方のテキストが太字で 12 ピクセルになります。
この継承と制限を防ぐにはスタイルを「段落の內(nèi)容」のみに変更した場(chǎng)合は、スタイルの変更を手動(dòng)で元に戻すことができます。
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」プロパティがサポートされるようになりました:
div.content {
all: revert;
}
これにより、より簡(jiǎn)潔で柔軟な設(shè)定が可能になります。スタイルのオーバーライド。
以上が親要素からの CSS 継承を防ぐにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。