CSSプロパティの値の継承、初期化、および未設定
すべての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;
}