一尘不染

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

css

根据MDN:

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

我不了解浏览器和自定义样式表。浏览器和自定义样式表也都可以替换all: unset,对吗?


阅读 976

收藏
2020-05-16

共1个答案

一尘不染

从MDN:

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

所以,unset要么是inheritinitial

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

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

例:

p {

  margin: 50px;

}


<p style="margin:revert">

  some text here

</p>

<p style="margin:unset">

  some text here

</p>

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

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


如果未应用默认样式,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>
2020-05-16