revert

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

此关键字从级联中删除所有已被覆盖的样式，直到达到要回滚到的样式。

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

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

Revert 不会影响应用于您重置的元素子元素的规则（但会删除父规则对子元素的影响）。因此，如果您对所有部分都设置了 color: green，并且对特定部分设置了 all: revert，则该部分的颜色将为黑色。但是，如果您有一个规则使所有段落都为红色，那么所有部分中的所有段落仍然都是红色的。

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

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

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

示例

Revert 与 unset

虽然 revert 和 unset 类似，但对于某些元素的某些属性，它们有所不同。

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

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;
}

结果

恢复所有

在您进行了一些样式更改然后想要恢复到浏览器默认值的情况下，恢复所有值非常有用。因此，在上面的示例中，您可以通过对 all 应用 revert 关键字，一次性恢复所有属性，而不是分别恢复 font-weight 和 color。

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 属性已恢复，paragraph 仍然是红色的。此外，请注意标题和普通文本节点都是 steelblue。恢复的结果使得 section { color: darkgreen; } 对应用了 color: revert 的 section 似乎不存在。

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

规范

规范
CSS 级联和继承级别 4 # 默认

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

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