HTML のパブリック CSS スタイルから div を分離するにはどうすればよいですか?

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

HTML では、CSS カスケードと継承が、意図されていない div 内の要素に影響を与えることがあります。パブリック CSS ルールに従ってスタイル設定されます。これにより、予期しないフォーマットの問題が発生する可能性があります。これに対処するために、CSS カスケードと継承レベル 3 では、all 省略表現プロパティと unset キーワードが導入されました。

all キーワードと unset キーワードを使用する

div 内にタグが含まれないようにするにはパブリック スタイルの影響を受けないように、div では all: initial を設定し、その子孫では all: unset を設定できます。これにより、div 上のすべてのプロパティの継承がブロックされ、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>

div を分離しないと、div 内の画像と見出しはパブリック スタイルを継承します。これを分離するには、次の CSS を適用します。

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

これにより、#mydiv div 内の要素に影響を与えるパブリック スタイルがブロックされ、div 自体内で定義されたスタイルの継承が許可されます。

クロスブラウザのサポート

all プロパティは、ほとんどの最新のブラウザでサポートされています。古いブラウザの場合は、すべての CSS プロパティに初期値を手動で指定して、同様の結果を得ることができます。ただし、この方法は all プロパティを使用するよりも効果が低いことに注意してください。

以上がHTML のパブリック CSS スタイルから div を分離するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。