无需JavaScript，是否存在可移除或忽略既有CSS声明的属性？

目前没有原生CSS属性或属性值可以直接实现「移除/忽略某条已定义的高优先级CSS声明，让更低优先级的同名属性声明生效」的需求，目前CSS规范草案中也没有相关的成熟特性提案。

现有方案限制说明 #

你提到的inherit、initial、unset、revert几个关键字都无法匹配需求，原因如下：

• initial会将属性重置为浏览器定义的初始默认值，对应background属性来说就是transparent，不会匹配你自定义的div选择器规则值
• inherit会继承父元素的同属性值，和需求场景不匹配
• unset会对可继承属性走inherit逻辑，不可继承属性走initial逻辑，也无法命中你自定义的低优先级规则
• revert会回退到浏览器默认样式/用户自定义样式规则，同样不会应用你自己写的业务层低优先级选择器规则

CSS的优先级匹配逻辑本身是叠加覆盖模式，高优先级选择器的声明只会覆盖低优先级的同属性声明，没有提供「主动撤销当前选择器的某条声明，让低优先级声明生效」的机制。

纯CSS折中实现方案 #

如果不想显式赋值、也不想用JavaScript，可以调整选择器的编写结构来实现示例中的效果，修改后的代码如下：

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

div {background: red;}
/* 只给非hover状态的.foo设置蓝色背景，hover时该规则自动失效 */
.foo:not(:hover) {background: blue;}

这个方案不需要手动在hover状态重新赋值红色，也不需要引入CSS变量，完全依赖选择器的匹配规则实现需求。

内容的提问来源于stack exchange，提问作者Word Demon