revert-layer

**revert-layer** CSS 全局关键字 将级联层中属性的值回滚到 CSS 规则中匹配元素的上一个级联层中的属性值。使用此关键字的属性值将重新计算，就好像当前级联层中未在目标元素上指定任何规则一样。

如果没有其他级联层可回滚到匹配的 CSS 规则，则属性值将回滚到从当前层派生的计算值。此外，如果当前层中没有匹配的 CSS 规则，则元素的属性值将回滚到先前样式来源中定义的样式。

此关键字可以应用于任何 CSS 属性，包括 CSS 简写属性 all。

Revert-layer 与 revert 的区别

revert-layer 关键字允许您将样式回滚到作者来源中先前级联层中指定的样式。revert 关键字相比之下，允许您将作者来源中应用的样式回滚到用户来源或用户代理来源中指定的样式。

revert-layer 关键字理想情况下用于应用于级联层中的属性。但是，如果应用于级联层之外的属性，它会将属性值回滚到任何由表示性提示（例如 width 和 height 属性或 HTML 中的 <s> 元素）设置的值，默认为用户代理样式表或用户样式中建立的值。与 revert 关键字不同，revert 关键字将表示性提示视为作者来源的一部分并将其一起回滚，revert-layer 关键字会忽略级联层之外的表示性提示，因此不会将其回滚。

示例

默认级联层行为

在下面的示例中，在 CSS 中定义了两个级联层，base 和 special。默认情况下，special 层中的规则会覆盖 base 层中竞争的规则，因为 special 在 @layer 声明语句中位于 base 之后。

HTML

html
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

结果

所有 <li> 元素都匹配 special 层中的 item 规则，并且为红色。这是默认的级联层行为，其中 special 层中的规则优先于 base 层中的规则。

回滚到先前级联层中的样式

让我们检查一下 revert-layer 关键字如何更改默认的级联层行为。对于此示例，special 层包含一个额外的 feature 规则，该规则针对第一个 <li> 元素。此规则中的 color 属性设置为 revert-layer。

HTML

html
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

css
@layer base, special;

@layer special {
  .item {
    color: red;
  }
  .feature {
    color: revert-layer;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

结果

将 color 设置为 revert-layer 后，color 属性值将回滚到先前层 base 中匹配的 feature 规则中的值，因此“项目一”现在为绿色。

回滚到先前来源中的样式

此示例显示了当没有级联层可回滚到并且当前层中没有匹配的 CSS 规则来继承属性值时，revert-layer 关键字的行为。

HTML

html
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

css
@layer base {
  .item {
    color: revert-layer;
  }
}

结果

所有 <li> 元素的样式将回滚到用户代理来源中的默认值。

规范

规范
CSS 级联和继承级别 5


# revert-layer

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅