すべての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 は黒で、ブラウザの初期デフォルト値を取ります。
  • ワニはオレンジ色です。この場合、値が一致する親が存在するため、unsetinheritとして機能します。
  • コモドドラゴンは紫色で、 .wrapperpセレクターから値を取得する唯一の段落です。

👉unsetの巧妙なトリックは、 all の省略形と組み合わせると、セレクターのすべてのプロパティに自動的に影響します。 以下は、選択したp要素のすべてのプロパティの設定を解除します。

article p {
  all: unset;
}