Question

根据MDN：

在许多情况下，revert关键字的工作原理与未设置的关键字完全相同。的唯一的区别是浏览器设置了值的属性或由用户创建的自定义样式表（在浏览器端设置）。

我不了解浏览器和自定义样式表。浏览器和自定义样式表都可以替换为all: unset，对吧？

Answer 1

unset关键字将首先尝试回退到继承的属性值，而还原将直接回退到浏览器/自定义样式表。根据MDN：

如果未设置CSS关键字从其父项继承，则将其重置为继承值，如果不是，则将其重置为初始值。换句话说，在第一种情况下，它的行为类似于Inherit关键字，在第二种情况下，其行为与初始关键字类似。

unset - CSS @ MDN

Answer 2

从MDN：

如果未设置CSS关键字从其父项继承，则将其重置为继承值，如果不是，则将其重置为初始值。换句话说，在第一种情况下，其行为类似于inherit关键字，在第二种情况下，其行为类似于initial关键字。

所以unset是inherit或initial

revert CSS关键字将属性的级联值从其当前值恢复为属性如果当前样式源未对当前元素进行任何更改将具有的值。因此，如果该属性从其父级继承，则将其重置为继承的值，或者重置为由用户代理的样式表（或如果存在的话，由用户样式）建立的默认值。

假设浏览器将默认样式应用于您的元素。使用revert，您将放回那些样式，而unset将不放回样式。

示例：

p {
  margin: 50px;
}

<p style="margin:revert">
  some text here
</p>
<p style="margin:unset">
  some text here
</p>

在上面的示例中，还原将删除50px边距，并放回浏览器应用的默认边距。在第二种情况下，未设置只会将边距设置为initial（即0）。

^{此功能的支持仍然很低，因此上面的示例在大多数浏览器中不起作用。它只在Firefox上很糟糕}

如果未应用默认样式，则revert的行为与unset相同

在许多情况下，revert关键字的工作原理与未设置的关键字完全相同。唯一的区别是属性具有由浏览器或用户创建的自定义样式表设置的值（在浏览器侧设置）。

all是所有属性的简写，因此上述相同的逻辑适用于每个属性。

更多示例：

p {
  margin: 50px;
  border:1px solid blue;
}

.box {
  color: red;
  display:unset;
}

p {
  color:unset; /* I will be inherit so I will keep the red color*/
  display:inline-block;
}

<div class="box">
  <p style="margin:revert;border:revert;display:revert;">
    some "block" text that should have no border and default browser margin
  </p>
  <p style="margin:unset;border:unset;display:unset;">
    some "inline" text that should have no border and no margin
  </p>
</div>

Answer 3

revert和unset相同，除了属性的默认css值不同于浏览器或用户创建的自定义样式表设置的值。

例如，对于所有元素（包括div），display的css默认值是inline，因此，如果设置display:unset，它将像display:initial一样起作用。与display:inline相同，但是我们知道浏览器为div设置了display:block。

<div style="border: 1px solid blue">
  <p> This div use unset, now divs display will be inline</p>
  <div style="display:unset;"> text</div>
  <div style="display:unset;"> text</div>
</div>
<br/>
<div style="border: 1px solid blue">
  <p> This div use revert, now divs display will be block (the browser value or the value created by the user)</p>
  <div style="display:revert;"> text</div>
  <div style="display:revert;"> text</div>
</div>

Answer 4

以上答案都不足以解释这些特殊“重置”属性值的微妙之处。大多数开发者在使用可继承和不可继承属性时都会被它们绊倒。

对于初学者来说，all、revert 和 unset 对 Internet Explorer 永远不起作用。因此，它们应始终与其他解决方案结合使用。

让我们先从 all:revert 开始，因为它也定义了 all:unset，除了下面解释的一个主要区别。当您将 all:revert 分配给一个元素时，它会执行以下操作：

您通过样式表分配给元素的任何继承属性（通常是基于文本的，如字体或颜色等）现在都被删除，并从上面的任何父项分配了“继承”和样式的值元素现在通过正常继承传递给它。您通过自定义样式直接分配或更改的那些将被删除，并通过现在分配给它们的“继承”值替换为这些继承的值。
您通过样式表分配给元素的任何不可继承属性值（如显示或边框等）将从元素中删除，并在浏览器的默认 UA 样式表中找到分配的值，或在浏览器中找到的任何用户样式表（不是作者的）。这通常是您安装浏览器时附带的默认样式表。
上述规则假设您没有更多的选择性样式来对您要还原的元素上的任何属性进行“还原”级联。 “all:revert”就像任何其他 CSS 属性一样，因此任何层叠在该元素上的任何属性上的任何内容都将单独胜过“all:revert”在该元素上重置的属性列表。

工作原理示例：

可继承的财产如果您已将特殊的“font-family:sans-serif”属性（可继承）分配给“div”，但现在将“all:revert”分配给该 div，则“sans-serif”将从“font”中删除，并且它现在将从 div 上方的父树继承级联中的 font-family 值。例如，它可以是多个父元素或来自“body”元素。

不可继承的财产如果您分配了自定义“边框：2px 纯蓝色；”值（不可继承）到同一个“div”，但“all:revert”现在被分配给那个 div，那个边框将被删除，浏览器在“div”上的“边框”的默认值（在你的浏览器的 UA 默认值中分配）样式表）将被使用。对于“div 上的边框”，这几乎总是“无”。

all:unset 所做的事情是一样的，但对于不可继承的属性值，它回退到“初始”，这不是浏览器 UA 样式表的默认值，甚至不是元素的默认值对于该属性，但无论使用它的元素如何，属性本身的通用默认值。这是非常讨厌的，而不是大多数人想要的。示例：在“div”上设置“display:unset”将默认为“display:inline”，而不是您期望的“display:block”。

all：unset和all：revert之间有什么区别

4 个答案: