数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中 revert 和 unset 关键字的区别
CSS 是一种强大的工具，它使开发人员能够根据自己的意愿自定义网站的外观。由于 CSS 提供了众多功能和属性，因此开发人员很可能为了达到预期效果而互换使用两个关键字。
因此，了解这些容易混淆的关键字的详细信息非常重要，以避免进一步的错误。“revert” 和 “unset” 就是两个这样的关键字。这两个关键字看起来可能很相似，但在某些元素的某些属性上却存在明显的差异。在这里，我们将讨论这些关键字，如何以及何时使用它们，以及它们之间的区别。
Revert 关键字
“revert” 关键字用于 CSS 中，将级联样式值恢复为其继承值或默认值（如果不存在继承值），如 CSS 声明中所定义。
假设您将 “revert” 关键字应用于某个属性（例如 font-weight、margin、color 等）。现在，您的浏览器将检查该属性从其父元素继承的值。如果发现该属性被继承，则子元素该属性的值将重置为从父元素继承的值。而如果该属性未被继承，则浏览器将为子元素分配默认值（如 CSS 声明中给出的值）。
示例
让我们通过一个示例更好地理解这一点。
<html>
<head>
<style>
/* Styles for the parent element */
.parent {
background-color: green;
font-size: 24px;
}
/* Styles for the child elements */
.child1,
.child2 {
background-color: white;
}
.child1 {
color: revert;
font-size: revert;
background-color: revert;
}
</style>
</head>
<body>
<div class="parent">
<p class="child1"> This is the child element with revert keyword. </p>
<p class="child2"> This is the child element without revert keyword. </p>
</div>
</body>
</html>
在上面的示例中，我们将父元素的 background-color 和 font-size 分别设置为 green 和 24px。然后，我们将两个子元素的 background-color 都设置为 white。之后，我们对 child1 的 color、font-size 和 background-color 使用了 revert 关键字。
因此，我们可以看到，对于 child1，font-size 和 background-color 都已重置为从父元素继承的值。请注意，child1 元素的颜色恢复为 默认值（即 black），因为它未在父元素中声明。
而 child2 未使用 revert 关键字，其 background-color 为 white，text color 为 red。（请注意，这两个属性也为 child1 设置了，但由于之后对其使用了 revert 关键字，因此这些值已被重置。）
Unset 关键字
CSS 中的 unset 关键字用于将级联样式值恢复为其继承值或初始值。如果该属性由父元素继承，则它将获取继承的值。否则，它将重置为初始值。换句话说，如果您为属性分配了一个与其初始值不同的新值，并将其设置为“unset”，则该属性的值将设置为该初始值。
这里，属性的初始值是指在任何样式规则应用于它之前，它所具有的原始值。
示例
让我们看一个示例 -
<html>
<head>
<style>
.parent {
font-family: Algerian;
font-size: 18px;
}
.child {
font-size: unset;
}
</style>
</head>
<body>
<div class="parent">
<p class="child"> This is an example. </p>
</div>
</body>
</html>
在上面的示例中，父元素的 font family 为 Algerian，font size 为 18 pixels。我们可以看到，子元素从其父元素继承了 font family（即 Algerian）。
但是，由于我们将 font size 值设置为 unset，这意味着该元素将从其父元素继承 font size（此处为 18 pixels）。
如果子元素在 CSS 声明中设置了不同的 font size，则 “unset” 关键字会将其重置为父元素的值。
Revert 和 Unset 之间的区别
以下是 revert 和 unset 之间的主要区别 -
| Revert | Unset |
|---|---|
revert 关键字用于将属性的值重置为其 继承 值，或重置为 默认 值（如果它没有任何继承值）。如果您在 CSS 声明中未为该属性分配任何继承或默认值，则 revert 关键字将不起作用。 |
另一方面，unset 关键字使开发人员能够将属性的值重置为其继承值或初始值。此值可能与默认值不同。即使对于没有初始值的属性，我们也可以使用 unset 关键字。 |
Revert 或 Unset - 选择哪一个？
如果您有一个具有初始值的属性，并且希望将其值设置为继承或默认值，则使用 revert 关键字。而如果您希望将属性重置为其初始值，无论它是否已被分配了不同的值，则使用 unset 关键字。
结论
在本文中，我们讨论了 CSS 中使用的两个关键字 - revert 和 unset。根据具体情况，它有助于将属性的值重置为其默认值或继承值。Revert 关键字在 Google 84、Safari 9.1、Opera 70、Microsoft Edge 84 等浏览器中受支持。简而言之，unset 关键字用于将值重置为其初始值，而 revert 关键字则重置为继承或默认值。
152 次浏览
