パブリック CSS スタイルが Div コンテンツに影響を与えないようにする方法: 「all:initial」はどのように機能しますか?

パブリック CSS スタイルが Div コンテンツに影響を及ぼさないようにする方法

HTML コードでは、スタイル設定の目的で要素をグループ化するために div タグがよく使用されます。ただし、パブリック CSS スタイルシートに適用されるスタイルから div タグ内のコンテンツを分離する必要がある場合があります。

CSS の継承とカスケード

CSS スタイルは継承されます。親要素から子要素によって。これは、画像と見出しタグが両方とも div タグ内にある場合、特定の場合を除いて、それらは div タグに適用された CSS プロパティを継承することを意味します。

'all:initial による継承のブロック'

div タグ内のコンテンツがパブリック CSS スタイルの影響を受けないようにするために、CSS プロパティ 'all:initial' を使用できます。このプロパティは、継承および定義されたすべての CSS プロパティを初期値にリセットします。

コード例

指定された HTML コード内の div コンテンツを分離するには、次の CSS を使用できます。 used:

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

Div タグ内での継承の許可

「all:initial」は継承をブロックしますが、div タグ自体内で継承を許可することは可能です。これを行うには、div タグの子孫要素で 'all: unset' プロパティを使用します。

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

Browser Support

The 'all'短縮プロパティは、Chrome、Firefox、Safari、Edge などの最新のブラウザで広くサポートされています。より広範なサポートを得るには、より長いバージョンを使用できます。これには、すべての CSS プロパティを初期値に設定する必要があります。

<code class="css">#mydiv {
  /* ... (set all CSS properties to 'initial') ... */
}</code>

結論

By using 'all:Initial ' を使用して継承をブロックし、'all: unset' を使用して div 内で継承を許可すると、div タグのコンテンツをパブリック CSS スタイルシートから分離できます。このテクニックは、自己完結型のウィジェットやコンポーネントを作成する場合に特に役立ちます。

以上がパブリック CSS スタイルが Div コンテンツに影響を与えないようにする方法: 「all:initial」はどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。