ホームページ >ウェブフロントエンド >CSSチュートリアル >親要素からの CSS 継承を防ぐにはどうすればよいですか?
親要素からの CSS 継承を防ぐにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-11-26 06:47:12560ブラウズ
CSS の継承とオーバーライド
特定の状況では、子要素が親要素から継承したスタイルを継承しないようにする必要がある場合があります。これを実現するための特定の CSS プロパティはありませんが、スタイルの変更を手動で元に戻したり、追加のクラスを追加してより具体的なスタイルを定義したりすることは可能です。
たとえば、次の HTML と CSS を考えてみましょう:
HTML:
<body> <div>
CSS:
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; }
あるいは、可能であれば、マークアップに追加のクラスを追加することもできます。より正確なスタイルを提供します:
<form div.sub { color: red; }
form div div.content { /* remains green */ }
最新のブラウザの最近のバージョンでは、特定の要素の継承を明示的に元に戻す「revert」プロパティがサポートされるようになりました:
div.content {
all: revert;
}
これにより、より簡潔で柔軟な設定が可能になります。スタイルのオーバーライド。
以上が親要素からの CSS 継承を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。