CSSプロパティの値の継承、初期化、および未設定
提供:Dev Guides
すべてのCSSプロパティには、継承、初期、未設定の3つの基本値が共通しています。 継承と初期化は長い間存在していましたが、unsetは新しい追加です。 値が何をするかは時々混乱する可能性があるので、ここに内訳があります:
- inherit :親要素からプロパティを取得します。
- initial :プロパティのデフォルト値(ブラウザのデフォルト)。
- unset :継承または初期として機能します。 親の値が一致する場合は継承として機能し、そうでない場合は初期値として機能します。
明確にするための例を次に示します。 マークアップは次のとおりです。
<div class="wrapper"> <p class="one">Snake<p> <p class="two">Lizard<p> <p class="three">Alligator</p> <p>Komodo Dragon</p> </div>
そしてこれが私たちのCSSです:
.wrapper { color: orange; } .wrapper p { color: purple; } p.one { color: inherit; } p.two { color: initial; } p.three { color: unset; }
- Snake はオレンジ色で、ラッパーdivから継承しています。
- Lizard は黒で、ブラウザの初期デフォルト値を取ります。
- ワニはオレンジ色です。この場合、値が一致する親が存在するため、unsetはinheritとして機能します。
- コモドドラゴンは紫色で、 .wrapperpセレクターから値を取得する唯一の段落です。
👉unsetの巧妙なトリックは、 all の省略形と組み合わせると、セレクターのすべてのプロパティに自動的に影響します。 以下は、選択したp要素のすべてのプロパティの設定を解除します。
article p { all: unset; }