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 层中的竞争规则，因为在 @layer 声明语句中，special 列在 base 之后。
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
@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
<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
@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
<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
@layer base {
.item {
color: revert-layer;
}
}
结果
所有 <li> 元素的样式都回滚到用户代理来源中的默认值。
规范
| 规范 |
|---|
| CSS 级联与继承第五级 # revert-layer |
浏览器兼容性
加载中…