css - CSS で非疑似クラス スタイルにフォールバックする方法はありますか?

Question

他の誰かがコードを所有している青い div がある場合

.stuff {
  background-color: blue;
}

そして、ホバー時に赤くしたい

.stuff:hover {
  background-color: red;
}

しかし、クラスを追加して非擬似クラス状態に戻せるようにしたいと考えています。

.stuff.otherclass:hover {
  background-color: unset; /* Want blue in this case */
}

前の疑似クラスの状態に戻る CSS オプションはありますか?

Codepen デモ: http://codepen.io/anon/pen/EyEWww

Answer 1

カスケードをロールバックする唯一の方法はrevertキーワードを使用することですが、別のオリジンにロールバックします。

勝者を無視して、カスケードの出力の2 番目の値をカスケードされた値にする方法はありません。

代わりに、セレクターを変更して:not()疑似クラスを使用できます。

.stuff {
  background-color: blue;
}
.stuff:not(.otherclass):hover {
  background-color: red;
}

または、代わりに、.stuff.otherclass:hoverより特異性が高いことを利用します。.stuff:hover

.stuff, .stuff.otherclass:hover {
  background-color: blue;
}
.stuff:hover {
  background-color: red;
}