ホームページ > ウェブフロントエンド > CSSチュートリアル > パブリック CSS スタイルが Div コンテンツに影響を与えないようにする方法: 「all:initial」はどのように機能しますか?

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

Barbara Streisand
リリース: 2024-10-26 04:01:03
オリジナル
300 人が閲覧しました

How to Prevent Public CSS Styles from Affecting Div Contents: How Does 'all: initial' Work?

パブリック 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート