CSS 关键字 revert 用于在当前样式源进行任何更改之前将属性重置为其原始值。
这意味着它可以恢复为用户代理设置的值、用户设置的值、继承的值(如果可继承)或原始值。
它适用于任何 CSS 属性,包括简写属性,例如 all。
此关键字删除所有样式已从级联中覆盖,直到达到要恢复的样式。
如果在网站的自定义样式中使用关键字 revert(作者origin),属性的级联值将恢复为用户的自定义样式(如果可用);否则,该样式将恢复为用户代理的默认样式。
如果该样式在用户的自定义样式表中使用,或者该样式由用户应用(源自用户),关键字revert将级联值重置为用户代理的默认样式。
当关键字revert用于用户代理的标准样式时,与 unset 具有相同的功能。
在大多数情况下,关键字 revert 的工作方式与 unset 类似,但其值已由浏览器设置或用户创建的属性除外浏览器页面上的自定义样式表。
CSS revert - 基本示例
在以下示例中,CSS 关键字 revert 应用于.revert-example 类中的文本颜色,使文本从父元素 (.container) 继承其颜色。
因此,文本将恢复为指定的默认颜色通过 body 元素,展示了 revert 关键字在灵活样式方面的实用性。
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
background-color: #ddebed;
padding: 20px;
border: 1px solid #ddd;
}
.custom-text {
color: red;
}
.revert-element {
color: revert;
}
</style>
</head>
<body>
<div class="container">
<h1>原始风格</h1>
<p class="custom-text">此文本具有自定义红色。</p>
<h1>Reset示例</h1>
<p class="revert-element">该文本继承其父级的颜色,恢复为默认颜色。</p>
</div>
</body>
</html>