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;
}