根据MDN:
在许多情况下,revert关键字的工作原理与未设置的关键字完全相同。唯一的区别是属性具有由浏览器或用户创建的自定义样式表(在浏览器侧设置)设置的值。
我不了解浏览器和自定义样式表。浏览器和自定义样式表也都可以替换all: unset,对吗?
all: unset
从MDN:
如果未设置CSS关键字从其父级继承,则将其重置为继承的属性,如果不是,则将其重置为初始值。换句话说,inherit在第一种情况下,其行为类似于initial关键字,在第二种情况下,其行为类似于关键字。
inherit
initial
所以,unset要么是inherit或initial
unset
CSS CSS关键字revert将属性的级联值从其当前值恢复为该属性应 具有 的值( 如果当前样式原点未 对当前元素 进行任何更改) 。因此,如果该属性从其父级继承,则将其重置为继承的值,或者重置为由用户代理的样式表(或如果存在的话,由用户样式)建立的默认值。
假设浏览器将默认样式应用于您的元素。使用revert,您将放回那些样式,而unset不会。
revert
例:
p { margin: 50px; } <p style="margin:revert"> some text here </p> <p style="margin:unset"> some text here </p>
在上面的示例中,还原操作将清除50px边距并放回浏览器应用的默认边距。在第二种情况下,未设置只会将边距设置为initial(即0)。
50px
0
并非所有浏览器都支持还原值:https : //caniuse.com/#feat=css-revert-value
如果未应用默认样式,revert则其行为与unset
在许多情况下,revert关键字的工作原理与未设置的关键字完全相同。唯一的区别是属性 具有由浏览器或用户创建的自定义样式表 (在浏览器侧设置)设置的值。
all 是所有属性的简写,因此上述相同的逻辑适用于每个属性。
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>