revert

Baseline 已广泛支持

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2020 年 7 月以来，它已在各大浏览器中可用。

revert CSS 关键字将属性的层叠值从当前值恢复为如果当前样式源未对当前元素进行任何更改时该属性应有的值。因此，它将属性重置为用户代理设置的值、用户设置的值、其继承值（如果可继承）或初始值。它可以应用于任何 CSS 属性，包括 CSS 简写属性 all。

此关键字将从层叠中移除所有已被覆盖的样式，直到回滚到的样式。

如果由网站自己的样式（作者源）使用，revert 会将属性的层叠值回滚到用户的自定义样式（如果存在）；否则，它会将样式回滚到用户代理的默认样式。
如果在用户的自定义样式表中使用，或者样式由用户应用（用户源），revert 会将层叠值回滚到用户代理的默认样式。
如果在用户代理的默认样式中使用，此关键字在功能上等同于 unset。

在许多情况下，revert 关键字与 unset 的工作方式完全相同。唯一的区别在于那些由浏览器或用户创建的自定义样式表（在浏览器端设置）设置了值的属性。

Revert 不会影响应用于你重置的元素的子元素的规则（但会移除父规则对子元素的影响）。因此，如果你为所有 section 设置了 color: green，并在特定 section 上设置了 all: revert，则该 section 的颜色将为黑色。但是如果你有一条规则将所有段落设置为红色，那么所有段落仍将在所有 section 中显示为红色。

注意：Revert 只是一个值。仍然可以使用特异性覆盖 revert 值。

注意：revert 关键字与 initial 关键字不同，不应混淆，后者使用 CSS 规范按属性定义的初始值。相反，用户代理样式表根据 CSS 选择器设置默认值。

例如，display 属性的初始值是 inline，而普通的用户代理样式表将 <div> 的默认 display 值设置为 block，将 <table> 的默认值设置为 table，等等。

示例

Revert 与 unset

尽管 revert 和 unset 相似，但对于某些元素的某些属性，它们有所不同。

因此在下面的示例中，我们设置了自定义的 font-weight，但随后尝试在 HTML 文档中内联 revert 和 unset 它。revert 关键字会将文本恢复为粗体，因为这是大多数浏览器中标题的默认值。unset 关键字将使文本保持正常，因为作为继承属性，font-weight 将从 body 继承其值。

HTML

html

<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>

CSS

css

h3 {
  font-weight: normal;
  color: blue;
}

结果

全部恢复

在进行了一些样式更改后，如果你想恢复到浏览器默认值，则恢复所有值会很有用。因此在上面的示例中，你无需分别恢复 font-weight 和 color，而是可以通过将 revert 关键字应用于 all 来一次性恢复它们。

HTML

html

<h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults.</h3>
<p>Just some text</p>

CSS

css

h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}

结果

在父元素上恢复

恢复会有效地移除你使用某些规则选择的元素的值，并且这仅对该元素发生。为了说明这一点，我们将为 section 设置绿色，为 paragraph 设置红色。

HTML

html

<main>
  <section>
    <h3>This h3 will be dark green</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be dark green.
  </section>
  <section class="with-revert">
    <h3>This h3 will be steelblue</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be steelblue.
  </section>
</main>

CSS

main {
  border: 3px solid steelblue;
}

section {
  margin: 0.5rem;
  border: 2px dashed darkgreen;
}

css

main {
  color: steelblue;
}
section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}

结果

请注意，即使 section 的 color 属性已恢复，段落仍然是红色的。另请注意，标题和纯文本节点都是 steelblue。恢复的结果是，对于应用了 color: revert 的 section，section { color: darkgreen; } 仿佛不存在。

此外，如果用户代理和用户都没有覆盖 <h3> 或 <section> 的颜色值，那么 steelblue 颜色将从 <main> 继承，因为 color 属性是可继承属性。

规范

规范
CSS 层叠与继承第四级 # default

浏览器兼容性

另见

使用 initial 关键字将属性设置为其初始值。
使用 inherit 关键字使元素的属性与其父元素相同。
使用 revert-layer 关键字将属性重置为在先前层叠层中建立的值。
使用 unset 关键字将属性设置为其继承值（如果可继承）或其初始值（如果不可继承）。
all 属性允许你一次性将所有属性重置为它们的初始、继承、恢复或未设置状态。

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者在 2025 年 10 月 1 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题