`all:unset`和`all:revert'有什么区别 [英] What's the difference between `all: unset` and `all: revert'

问题描述

根据MDN:

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

The revert keyword works exactly the same as unset in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

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

I don't understand the browser and custom stylesheet. Both browser and custom stylesheet can be replaced by all: unset also, right?

推荐答案

来自MDN:

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

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

所以unset是inherit或initial

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

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

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

Suppose the browser apply a default style to your element. Using revert, you will put back those styles while unset will not.

示例:

p {
  margin: 50px;
}

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

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

In the above example, the revert will erase the 50px margin and will put back the default margin applied by the browser. In the second case, unset will simply set the margin to initial (which is 0).

^{并非所有浏览器都支持还原值: https://caniuse.com/#feat=css-还原值}

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

In case no default styles are applied, revert will behave the same as unset

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

The revert keyword works exactly the same as unset in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

---

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

---

all is a shorthand for all the properties so the same logic described above apply to each property.

更多示例:

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>

这篇关于`all:unset`和`all:revert'有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！