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

  • Z时代
  • 2024-01-10
  • 分类：问答

根据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）。

并非所有浏览器都支持还原值：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>

以上是 all：unset和all：revert之间有什么区别 的全部内容， 来源链接： utcz.com/qa/429951.html

回到顶部