删除/忽略 css 声明或规则 WITHOUT javascript

Question

I'm guessing the answer is "no", but I'll ask anyway. Is there a CSS property/value that allows you to remove or ignore a previous CSS declaration or rule? Example:

<div class="foo">whatever</div>

div {background: red;}
.foo {background: blue;}
.foo:hover {background: <something-that-will-let-it-default-back-to-red>;}

Values of inherit , initial , unset , or revert do not work for this. The idea is to avoid the need to explicitly set it back to the style it would have had if the rule had not existed. Using a CSS variable would also be explicit. With Javascript, one could just toggle the "foo" class on hover. I'm just wondering if there's a way to do something similar with CSS only, even if it's only being considered as part of a CSS draft proposal.

Answer 1

Doesn't exactly "remove" a previous CSS declaration/rule, but it does have the.net effect that I was looking for.

 div {background: red;}.foo:not(:hover) {background: blue;}

 <div class="foo">whatever</div>

Answer 2

What about:

div {background: red;}
.foo {background: blue;}
.foo:hover {background: red !important;}