グローバル CSS の影響から Div を分離する方法:「all:initial」と「all:unset」を使用する

グローバル CSS の影響から Div を隔離する方法

提供された HTML コードには、本文内に ID「mydiv」の div 要素がネストされています。画像や見出しなどの要素に CSS スタイルを適用する場合、これらの公開スタイルから「mydiv」内の要素を除外したい場合があります。

CSS カスケードと継承の制御

CSS カスケードと継承レベル3 では、all 短縮プロパティと unset キーワードが導入され、継承を制限し、特定の要素を分離できるようになりました。要素に all:initial を設定すると、すべての継承が効果的にブロックされ、すべてのプロパティが初期値にリセットされます。これは、親要素から継承されたスタイルを無視して、白紙の状態から始めるのと似ています。

「mydiv」をすべて: 初期値と分離します

継承されたスタイルが「mydiv」内の要素に影響を与えないようにするには、次のようにします。 all:initial を div に適用し、all: unset をその子孫に適用します。

<code class="css">#mydiv {
  all: initial; /* Blocks inheritance for all properties */
}

#mydiv * {
  all: unset; /* Allows inheritance within #mydiv */
}</code>

Comprehensive Property Reset

または、次のようにします。さまざまなブラウザ間での互換性を確保するには、すべての既知の CSS プロパティ (ベンダー プレフィックス付きバージョンを含む) を手動で初期値に設定できます。

<code class="css">#mydiv {
  /*
   * Using initial for all properties
   * to completely block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * Using inherit for normally heritable properties,
   * and initial for the others, similar to unset
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}</code>

これらの手法を活用することで、「mydiv」内の要素の継承を防ぐことができます。グローバル CSS スタイルの影響を受けるため、カプセル化された独自のスタイル環境内で CSS スタイルが分離されます。

以上がグローバル CSS の影響から Div を分離する方法:「all:initial」と「all:unset」を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。