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关键字，但它会回滚到另一个来源。

没有办法让级联输出中的第二个值成为级联值，忽略获胜者。

相反，您可以修改选择器并使用: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;
}