CSS 中的 "revert" 是什么？ | CSS-Tricks

Miriam Suzanne 在 Mozilla 开发者视频中对此进行了讲解。

CSS 中的 revert 值会将属性“重置”为其继承的值，但仅限于 UA 样式表。这一点至关重要，因为它不会将 <p> 重置为内联，例如，因为 <p> 是 UA 样式表中设置的块级元素。

因此，如果我们有以下 HTML

<p>Lorem, ipsum dolor.</p>
<p class="alt">Fugit, id vel.</p>

和 CSS

p {
  color: red;
}
.alt {
  color: revert;
}

两个段落都将被 p 选择器选中，使其变为红色，但第二个段落上的类选择器具有更高的特异性，因此 color: revert; 获胜，将文本更改回黑色（UA 默认值）。

但是，color 属性会级联，因此如果我们有

<div class="parent">
  <p>Lorem, ipsum dolor.</p>
  <p class="alt">Fugit, id vel.</p>
</div>

.parent {
  color: blue;
}
p {
  color: red;
}
.alt {
  color: revert;
}

第二个段落将是 蓝色，因为 revert 强制它从继承中获取其 color。

revert 值是相当新的，Firefox 和 Safari 支持，但 Chrome 世界尚未支持。我们已经有一些相关的关键字可以作用于任何属性，旨在帮助控制继承和重置值。

区别很小，但很重要：unset允许继承，而initial不允许。

Miriam 认为 revert 实际上是最有用的，因为它“考虑了用户和用户代理样式”。

我并不反对。但是（我讨厌这么说）我确实认为我们需要第四个选项，一个具有 initial 的强制功能，但又具有 revert 的 UA 样式表尊重功能的选项。比如…

.button {
  all: default; /* Not real! */

  /* New styles starting from UA base */
}

这些关键字适用于任何属性，但我认为使用 all 最有说服力。这是一种清除元素上所有样式以从空白状态开始的方法。也就是说，这三个选项都不够好，无法满足这种用例。unset 和 revert 值不够好，因为它们仍然允许继承，因此无法很好地清除样式。initial 值过于强大，因为它会清除您可能不期望的默认值，例如使 <div> 变为内联而不是块。

CanRau

# 2020年1月27日

是的，我完全同意这将是一件非常棒的事情，在因 initial 和 unset 而感到沮丧时，我尝试过“查找”很多次。

Šime Vidas

# 2020年1月27日

我能想到的针对你的用例的最佳解决方案

.button-wrapper {
  all: initial !important;
}

.button {
  all: revert !important;
}

Chris Coyier

评论永久链接# 2020年1月27日

非常巧妙。
Predrag

评论永久链接# 2020年1月28日

为什么不直接创建一个新的 css 类并从头开始呢？

harry

# 2020年2月13日

revert 和 inherit 之间有什么区别？

Geoff Graham

评论永久链接# 2020年2月13日
好问题！inherit 获取父元素的值。例如，假设我们有一个元素在其周围有一个边框
```
.parent {
  border: 3px solid red;
}
```
现在假设该元素内部还有另一个元素。这是一个子元素，因为它位于另一个元素内部。如果我们希望该子元素具有相同的边框，我们只需使用 inherit 复制边框，而无需重新编写所有内容。
```
.parent {
  border: 3px solid red;
}

.parent .child {
  border: inherit; /* results in: 3px solid red; */
}
```
然后是 revert，它会清除元素可能获取的任何继承样式，并使用元素的默认样式。
```
.parent {
  border: 3px solid red;
}

.parent .child {
  border: revert; /* results in no border */
}
```

Gabriel T Sharp

# 2022年6月14日

请注意，css 的“revert”值并非始终可以像您预期的那样进行动画处理和/或过渡。它可能在一个浏览器中有效，而在另一个浏览器中无效。这是因为每个内核都有自己的 CSS 解析方式，并且动画/过渡是使用这些感知值处理的。这在未来十年可能不会成为问题（我们现在只剩下几个不同的浏览器引擎了），所以我现在只是提醒一下。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。