remove/ignore css declaration or rule WITHOUT javascript-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

What about:

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