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

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

問題

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

<code class="html"><div id="mydiv">
  <img  src="an%20image%20source" alt="「div」コンテナをパブリック CSS スタイルから分離し、その子がグローバル スタイルを継承しないようにするにはどうすればよいでしょうか?" >
  <h1 id="Hi-it-s-test">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>

ブラウザのサポート

all 省略表現プロパティは、次のブラウザでサポートされています。

• Chrome 37
• Firefox 27
• Safari 9.1
• Edge 79
• Opera 24

以上- 現在のブラウザのサポート情報については、公式ドキュメントを参照してください。

以上が「div」コンテナをパブリック CSS スタイルから分離し、その子がグローバル スタイルを継承しないようにするにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。