根据MDN:
在许多情况下,revert关键字的工作原理与未设置的关键字完全相同。的
唯一的区别是浏览器设置了值的属性
或由用户创建的自定义样式表(在浏览器端设置)。
我不了解浏览器和自定义样式表。浏览器和自定义样式表都可以用all: unset
代替,对吗?
最佳答案
从MDN:
如果未设置CSS关键字从其父项继承,则将关键字重置为该属性的继承值,否则将其重置为初始值。换句话说,在第一种情况下,其行为类似于inherit
关键字,在第二种情况下,其行为类似于initial
关键字。
所以unset
是inherit
或initial
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
)。该功能的支持仍然很低,因此上面的示例在大多数浏览器中将不起作用。它只在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>