CSSのプロパティの値をリセットする

CSSのプロパティの値を戻す設定についていくつか試してみます。

unset

unsetはプロパティの値をリセットするキーワードで、祖先要素から継承された値がある場合はその値、ない場合はそのプロパティの初期値が設定されます。
例としてbutton要素で試してみます。

<button>ボタン</button>

<div class="wrap">
  <button>ボタン</button>
</div>

継承の比較として、.wrapでラップしたボタンとラップしていないボタンを用意しました。

ボタンの color と border に対してunsetを、.wrapの color と border に継承の確認用の値を設定してみます。

button {
  color: unset;
  border: unset;
}
.wrap {
  color: red;
  border: green 2px dotted;
}

ラップしている方のボタンを確認すると、colorは継承されるプロパティなので赤色に変わり、borderは継承されないプロパティなのでボーダー無しという表示になりました。
unsetのデモページ

initial

initialはプロパティの値を初期値に戻すキーワードです。
先ほど同様にbutton要素で試してみます。

button {
  color: initial;
  border: initial;
}
.wrap {
  color: red;
  border: green 2px dotted;
}

この場合はラップしている方のボタンのcolorも継承されず、初期値(黒色)になります。
initialのデモページ

inherit

inheritはプロパティの値を祖先要素から継承された値に戻すキーワードです。

button {
  color: inherit;
  border: inherit;
}
.wrap {
  color: red;
  border: green 2px dotted;
}

この場合はcolorと合わせて本来は継承されないborderも祖先要素から継承されます。
inheritのデモページ

revert

revertはプロパティの値をユーザーエージェントの既定値に戻すキーワードです。
a要素を例に試してみます。

<a href="#">classなしリンク</a>

<a href="#" class="link">classありリンク</a>

<div class="wrap">
  <a href="#">classなしリンク</a>

  <a href="#" class="link2">classありリンク</a>
</div>

a要素にスタイルを設定して、classを付与した際にそのプロパティをrevertするように設定してみます。

a {
  color: red;
  text-decoration-color: green;
}
.link {
  color: revert;
  text-decoration-color: revert;
}
.wrap a {
  color: gray;
  text-decoration-color: blue;
}
.wrap .link2 {
  color: revert;
  text-decoration-color: revert;
}

revertを設定した場合、ユーザーエージェントの既定値の青色に変わることを確認できました。
revertのデモページ

all

個別のプロパティではなく全てのプロパティに対して一括で設定したい場合、allプロパティを使います。

button {
  all: initial;
}

これでbutton要素の全てのプロパティの値が初期値に設定されました。
allのデモページ