先记住这个答案
revert 的作用是撤销当前层叠来源对该属性的所有声明。在作者样式表里写 color: revert，浏览器会假装作者从来没给这个属性写过任何值，然后按层叠规则去找下一个来源。对于可继承属性（比如 color、font-size），如果用户代理样式表没有显式设过值，就走正常继承，最终拿到父元素的计算值。所以大多数情况下，结果是父元素的继承值，而不是 CSS 规范里的初始值。
revert撤销的是整个作者来源，不只是当前规则- 继承属性的结果取决于用户代理样式表有没有设值
revert可恢复浏览器默认样式initial取初始值，revert回退来源
一个具体场景：重置卡片内文字颜色
假设页面的 <body> 设了 color: #333，卡片组件里有个高亮区域被设成了 color: red。现在想让高亮区域回到「正常的文字颜色」。
revert 让颜色回到继承值CSSbody {
color: #333;
}
.card .highlight {
color: red;
}
/* 想撤销高亮，回到正常颜色 */
.card .highlight.muted {
color: revert;
}
/* .muted 的 color 最终是 #333，来自 body 的继承 */写了 revert 之后，浏览器会撤销所有作者样式对 color 的设置。用户代理样式表对大多数元素的 color 没有显式声明，所以 color 作为可继承属性，沿着 DOM 树往上找，拿到 body 上的 #333。
这里要注意 <a> 标签是个例外。浏览器默认给链接设了 color: -webkit-link（蓝色），所以在 <a> 上写 color: revert 会回到蓝色，而不是继承父元素的颜色。
revert 和 initial 以及 unset 的区别
这三个关键字经常被混淆，区别在于它们回退到哪一层。
initial 回到 CSS 规范定义的初始值。比如 color 的初始值在规范里是 canvastext（以前多数浏览器实际表现为黑色），display 的初始值是 inline。这个值和浏览器样式表、父元素都没有关系。
unset 对可继承属性等同于 inherit，对不可继承属性等同于 initial。它只关心属性是否可继承，不关心用户代理样式表里写了什么。
revert 则是回退到上一个层叠来源。作者样式里写 revert，撤销的是所有作者样式，保留用户代理样式。这意味着 <h1> 上写 font-size: revert 会恢复到浏览器默认的大标题字号（通常是 2em），而 unset 会让 font-size 继承父元素的值，标题就和正文一样大了。
/* 假设父元素 font-size: 16px，浏览器给 h1 默认 font-size: 2em */
h1 { font-size: 24px; }
h1.reset-initial { font-size: initial; }
/* → medium（约16px），CSS 规范的初始值 */
h1.reset-unset { font-size: unset; }
/* → 16px，继承父元素（因为 font-size 可继承） */
h1.reset-revert { font-size: revert; }
/* → 2em（32px），恢复浏览器默认的 h1 字号 */这个例子清楚地说明了三者的差异。revert 保留了浏览器对 <h1> 的特殊处理，另外两个没有。
容易答错的地方
- 以为
revert在继承属性上总是回到父元素的值 - 大部分情况确实如此，因为用户代理样式表对大多数继承属性没有显式声明。但浏览器对某些元素有特殊设置：
<a>的color、<pre>的font-family、<th>的text-align都被用户代理样式表显式设了值。在这些元素上用revert，回到的是浏览器默认值，不是父元素的继承值。 - 把
revert和unset搞混 unset在继承属性上等同于inherit，永远继承父元素的值。revert则要看用户代理样式表有没有设过。两者在<h1>的font-size、<a>的color这些场景上差异很明显。
面试官还会怎么问？
revert 用在不可继承的属性上会怎样？
一样的逻辑：撤销作者来源，回到用户代理样式。比如 <div> 上写 display: revert，用户代理给 <div> 的默认 display 是 block，所以回到 block。如果是 <span>，回到 inline。
在 @layer 里写 revert 会怎样？
revert 撤销的是整个作者来源，不只是当前 @layer。即使写在低优先级的 layer 里，也会把所有 layer 的作者样式一起撤销。如果只想回退到上一个 layer 的值，要用 revert-layer。
浏览器兼容性怎么样？
Chrome 84、Firefox 67、Safari 9.1 以上都支持 revert。IE 不支持。如果要兼容 IE，只能手动写回具体的值。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。