CSS revert和unset关键字之间的区别

CSS是一个强大的工具，使开发人员能够根据自己的意愿自定义网站的外观。由于CSS提供了许多功能和属性，开发人员很有可能会交替使用两个关键字来实现所需的效果。

因此，了解这些令人困惑的关键字的详细信息以避免进一步的错误非常重要。其中两个关键字是 revert 和 unset 。这两者可能看起来相似，但对于某些特定元素的某些属性而言，它们之间有明显的差异。在这里，我们将讨论这些关键字，如何使用它们以及它们之间的区别。

revert关键字

revert 关键字用于将层叠样式的值恢复为其继承值或默认值（如果没有继承值）。

假设你将 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。然后，我们使用了revert关键字来重置child1的color、font-size和background-color。因此，我们可以看到，对于child1，font-size和background-color都被重置为从父元素继承的值。请注意，由于未在父元素中声明该值，因此child1元素的颜色被恢复为默认值（即black）。而没有使用revert关键字的child2具有white background-color和red text color。（请注意，这两个属性之前也被设置给了child1，但由于之后使用了revert关键字，这些值被重置了。） 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>

在上面的示例中，父元素具有以下样式： 字体族 设置为 阿尔及利亚字体 ， 字体大小 设置为 18像素 。从中我们可以看出子元素会继承父元素的字体族（即 阿尔及利亚字体 ）。然而，由于我们将字体大小的值设置为 unset ，这意味着元素将从其父元素继承字体大小（在这里是18像素）。如果子元素在CSS声明中设置了不同的字体大小，则 “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 关键字将值重置为继承或默认值。