Chrome 148 悄悄上线了一个 CSS 关键字，能让一条规则「自我删除」——revert-rule 到底解决什么老问题

你是不是也写过这种 CSS：先给一个组件铺一套默认样式，再用媒体查询或 @supports 在特定条件下覆盖它。条件不满足时，那套覆盖样式其实根本不该存在——可它还是老老实实生效着，你只能靠自己把值手写回默认值。

Chrome 148 开始支持一个新关键字 revert-rule,它做的事情很简单：把当前这条规则的声明整个撤掉，退回上一层级联规则。名字里的 rule 不是随便取的——revert 退回的是「样式来源」，revert-layer 退回的是「图层」，而 revert-rule 退回的，就是「上一条规则」。

先看它到底解决什么问题

假设你有这样一段样式：

.button { color: green; }
.button { color: revert-rule; } /* 效果等同 green */

第二条规则的 color 被「撤回」,于是生效的值回到了第一条规则给的 green。单看这一例确实没什么意思，它的价值在于和条件语法配合。

revert-rule 真正的主场，是搭配 if() 条件函数使用——它允许你在条件不成立时，直接「抹掉」当前规则，而不是想尽办法算一个回去的值：

.card {
  display: if(style(--layout: fancy): grid; else: revert-rule);
}

当 --layout 不等于 fancy 时，这条规则等同于不存在，.card 的 display 就交回给更早的规则或浏览器默认值。以前要做到这一点，你得写两套规则再靠选择器优先级去分胜负，或者把条件塞进构建工具里——现在浏览器自己就能判断。

它和 revert / revert-layer 的区别

这三个关键字经常被混在一起，其实分工很清楚：

• revert：撤销到样式来源层面（比如作者样式撤销后，回落到浏览器默认样式表）
• revert-layer：撤销到上一个图层（@layer 定义的那一层）
• revert-rule：撤回当前这条规则本身，把决定权交给排在它之前的规则

一句话记法：revert 管来源，revert-layer 管图层，revert-rule 管这一条规则。

兼容性和落地建议

目前这个特性的状态是：Chrome 148 已 ship（桌面 / Android / WebView 同步），Firefox 和 Safari 都还在 standards-position 阶段、尚未表态。也就是说它现在不是能直接铺到生产环境的东西,尤其是面向老旧 Android WebView 的项目。

稳妥的用法是把它当作渐进增强的一环,并且永远留一条后备声明：

.card {
  display: grid; /* 不支持 revert-rule 的浏览器走这里 */
}
.card {
  display: if(style(--layout: fancy): grid; else: revert-rule);
}

不支持的浏览器会忽略第二条里无法解析的部分,继续用第一条的 grid；支持的浏览器才会走条件判断。这样你把「删除规则」的能力当成一个额外加成，而不是一个硬依赖。

值得现在就看一眼的理由

revert-rule 的信号意义可能比它本身更大:过去「条件不满足就撤销整条规则」这件事,只能靠更高优先级的选择器或构建期处理来模拟,现在开始收敛成 CSS 自己的一等能力。它的设计动机也和 if() 、自定义属性驱动样式这条线一脉相承——样式逻辑正在从「多写几条规则互相覆盖」转向「写一条规则，由浏览器判断要不要生效」。

对样式架构来说,这是个可维护性的信号:当你下一次想写「某条件下这份样式不该存在」时,不必再靠优先级打架,可以先问一句——这里的 revert-rule 是不是更诚实的表达。

眼下它还不能进生产主干,但值得放进你的关注清单,和 if()、@layer 放在一起理解。