特定の Div 内での CSS スタイルの継承を防ぐにはどうすればよいですか?

パブリック CSS スタイルから div を分離する

問題:

提供された HTML コードでは、CSS スタイルが適用されますimg 要素と h1 要素は、#mydiv div 内の要素にも影響を与えます。この継承を防ぐにはどうすればよいでしょうか?

解決策:

all 短縮プロパティの使用:

CSS レベル 3 では、 all 省略表現プロパティ。これを使用すると、要素のすべてのプロパティをリセットできます。 #mydiv div で all:Initial を設定すると、その先祖から継承されたすべてのスタイルがブロックされます。

#mydiv div 内でスタイルを許可するには、その子孫に all: unset を適用します。これにより、外部 CSS の影響を防ぎながら、div 内での継承が有効になります。

<code class="css">#mydiv {
  all: initial;
}
#mydiv * {
  all: unset;
}</code>

個別のプロパティを手動で設定する:

より広範なブラウザーをサポートするには、既知のすべてのプロパティを手動で設定しますCSS プロパティを #mydiv div の初期値に設定し、必要に応じてその子孫の初期値を継承または初期化します。これは、all プロパティの動作をシミュレートします。

追加の考慮事項:

• より詳細な制御のために、ID の代わりに div でクラスを使用することを検討してください。
• 完全な分離を確保するために、潜在的な疑似要素の子孫のスタイルをブロックします。
• all 短縮プロパティはまだ広くサポートされていないため、ブラウザーのサポートを監視します。

以上が特定の Div 内での CSS スタイルの継承を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。