「div」コンテナをパブリック CSS スタイルから分離し、その子がグローバルスタイルを継承しないようにするにはどうすればよいでしょうか?

Linda Hamilton

リリース： 2024-10-26 04:19:03

オリジナル

375 人が閲覧しました

How can you isolate a `div` container from public CSS styles and prevent its children from inheriting global styles?

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

問題

次の HTML コードを考えてみましょう:

<code class="html"><div id="mydiv">
  <img src="an image source" />
  <h1>Hi it's test</h1>
</div></code>

ログイン後にコピー

以下を適用しますCSS スタイルシート:

<code class="css">img {
  width: 100px;
  height: 100px;
}
h1 {
  font-size: 26px;
  color: red;
}</code>

ログイン後にコピー

すべてのに定義されたスタイルを防ぐにはどうすればよいかという疑問が生じます。

タグが #mydiv コンテナ内の要素に影響を与えるのを防ぎますか?

解決策

#mydiv 内の要素をグローバル CSS スタイルから分離するには、で導入された all 短縮プロパティと unset キーワードを利用できます。 CSS カスケードと継承レベル 3.

#mydiv で all:Initial を設定すると、すべてのプロパティの継承がブロックされ、デフォルト値にリセットされます。これにより、グローバルスタイルがコンテナにカスケードされるのを防ぎます。

#mydiv 内で継承を許可するには、その子孫に all: unset を設定します。そうすることで、コンテナ内で定義されたルールが外部スタイルからの干渉なしに有効になるようにします。

修正された CSS コードは次のとおりです:

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

ログイン後にコピー

この手法は次の点に注意することが重要です。ベンダープレフィックス付きのプロパティを含む、考えられるすべての CSS プロパティに適用されます。幅広いブラウザーのサポートを確保するには、疑似要素もターゲットにすることをお勧めします。

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

ログイン後にコピー

代替アプローチ

あるいは、ブラウザーの幅広い互換性を確保するために、各 CSS プロパティを手動で初期設定に設定することもできます。次のコードに示すように、#mydiv の値を取得し、その子孫に継承します。

<code class="css">#mydiv {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}</code>

ログイン後にコピー