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、revert和unset永远不适用于Internet Explorer。因此,应始终将它们与其他解决方案结合使用。 让我们首先从all:revert开始,因为它也定义了all:unset,除了下面解释的一个主要区别。当您将all:revert分配给一个元素时,它会执行以下操作: 1.通过样式表分配给元素的任何继承属性(通常是基于文本的,如字体或颜色等)现在都将被删除,并被分配一个值“inherit”,and styles from either the body element or the browser's UA default style sheet only现在通过正常继承传递给它。通过自定义样式直接分配或更改的属性将被删除,并通过现在分配给它们的“inherit”值替换为这些继承的值。 1.通过样式表分配给元素的任何不可继承属性值(如显示或边框等)将从元素中删除and styles from the browser's UA default style sheet only将分配给元素。这通常是安装浏览器时附带的默认样式表。 1.上面的规则假设你没有更多的选择性样式,可以级联到你正在还原的元素上的任何属性的“revert”上。“all:revert”就像任何其他CSS属性一样,所以任何级联到该元素上的任何属性的东西都将单独赢得该元素上的属性列表“all:revert”重置。 这是如何工作的示例: 不可继承属性如果你已经为一个“div”分配了一个特殊的“font-family:sans-serif”属性(可继承的),但是“all:revert”现在被分配给了那个div,“sans-serif”将从“font”中删除,并且它现在将从你的div上面的父树继承级联中的font-family值。例如,它可能是来自“body”元素的几个父树。 非继承财产如果您指定了自定义“边框:2 px纯蓝色;“value(不可继承的)到同一个“div”,但是“all:revert”现在被分配给那个div,该边框将被删除,并且将使用浏览器的“border”on“div”的默认值(在浏览器的UA默认样式表中分配)。对于“border on“div”,几乎总是“none”。
<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>
4条答案
按热度按时间ymzxtsji1#
来自MDN:
unset CSS关键字将一个属性重置为它的继承值(如果它从其父级继承),否则重置为它的初始值。换句话说,在第一种情况下,它的行为类似于
inherit
关键字,在第二种情况下,它的行为类似于initial
关键字。所以
unset
是inherit
或initial
revert CSS关键字将属性的级联值从其当前值还原为属性在当前样式源未对当前元素进行任何更改的情况下应有的值。因此,如果属性从其父级继承,则将其重置为继承值,或者重置为用户代理的样式表(或用户样式,如果存在)建立的默认值。
假设浏览器为你的元素应用了一个默认的样式,使用
revert
,你会放回那些样式,而unset
不会。示例:
在上面的例子中,revert将删除
50px
边距,并将浏览器应用的默认边距放回。在第二种情况下,unset将简单地将边距设置为initial
(即0
)。并非所有浏览器都支持revert值:https://caniuse.com/#feat=css-revert-value
如果未应用默认样式,则
revert
的行为与unset
相同revert关键字在很多情况下和unset的作用完全一样,唯一的区别是属性的值是由浏览器设置的,或者是由用户创建的自定义样式表(在浏览器端设置)设置的。
all
是所有属性的简写,因此上述相同的逻辑适用于每个属性。更多示例:
t9aqgxwy2#
unset
关键字会首先尝试回退到继承的属性值,而revert会直接回退到浏览器/自定义样式表。根据MDN:unset CSS关键字将一个属性重置为它的继承值,如果它从其父级继承,否则重置为它的初始值。换句话说,在第一种情况下,它的行为类似于inherit关键字,而在第二种情况下,它的行为类似于initial关键字。
unset - CSS @ MDN
mcvgt66p3#
上面的答案都不足以解释这些特殊的“重置”属性值的微妙之处。大多数开发人员在使用它们时都会被可继承与不可继承属性绊倒。
对于初学者来说,all、revert和unset永远不适用于Internet Explorer。因此,应始终将它们与其他解决方案结合使用。
让我们首先从all:revert开始,因为它也定义了all:unset,除了下面解释的一个主要区别。当您将all:revert分配给一个元素时,它会执行以下操作:
1.通过样式表分配给元素的任何继承属性(通常是基于文本的,如字体或颜色等)现在都将被删除,并被分配一个值“inherit”,
and styles from either the body element or the browser's UA default style sheet only
现在通过正常继承传递给它。通过自定义样式直接分配或更改的属性将被删除,并通过现在分配给它们的“inherit”值替换为这些继承的值。1.通过样式表分配给元素的任何不可继承属性值(如显示或边框等)将从元素中删除
and styles from the browser's UA default style sheet only
将分配给元素。这通常是安装浏览器时附带的默认样式表。1.上面的规则假设你没有更多的选择性样式,可以级联到你正在还原的元素上的任何属性的“revert”上。“all:revert”就像任何其他CSS属性一样,所以任何级联到该元素上的任何属性的东西都将单独赢得该元素上的属性列表“all:revert”重置。
这是如何工作的示例:
不可继承属性如果你已经为一个“div”分配了一个特殊的“font-family:sans-serif”属性(可继承的),但是“all:revert”现在被分配给了那个div,“sans-serif”将从“font”中删除,并且它现在将从你的div上面的父树继承级联中的font-family值。例如,它可能是来自“body”元素的几个父树。
非继承财产如果您指定了自定义“边框:2 px纯蓝色;“value(不可继承的)到同一个“div”,但是“all:revert”现在被分配给那个div,该边框将被删除,并且将使用浏览器的“border”on“div”的默认值(在浏览器的UA默认样式表中分配)。对于“border on“div”,几乎总是“none”。
all:unset所做的是相同的,但是对于不可继承的属性值,它福尔斯“initial”,这不是浏览器UA样式表的默认值,甚至不是元素对该属性的默认值,而是属性本身的通用默认值,而不管元素使用它。这是相当讨厌的,不是大多数人想要的。示例:在“div”上设置“display:unset”将默认为“display:inline”,而不是像您期望的那样“display:block”。
enxuqcxy4#
revert
和unset
是相同的,除非属性的默认css值与浏览器或用户创建的自定义样式表设置的值不同。例如,css的默认值
display
是inline
,所有元素包括div,所以如果你设置display:unset
,它将作为好像display:initial
,这是相同的display:inline
,但我们知道,浏览器设置display:block
的div。