css 所有还原的无效属性值

Question

我试图将应用于子元素的样式恢复为默认值，但我得到Invalid Property Value

HTML :

<div class="dropdown locale-selector">
   <button class="btn btn-secondary " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropdown button
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" rel="alternate" hreflang="en" href="">
      English
      </a>
      <a class="dropdown-item" rel="alternate" hreflang="es" href="">
      español
      </a>
   </div>
</div>

CSS：

.locale-selector a {
    all: revert;
}

CSS 错误：

Invalid Property Value all: revert

Answer 1

截至 2020 年第四季度， revert CSS 属性现已在所有 4种主要桌面浏览器的当前版本中得到原生支持，包括 Firefox ^v67+ 、Safari ^v9.1+ 、Chrome ^v84+和 Edge ^v84+ 。

移动支持是不稳定的，尽管当前版本的 iOS Safari ^iOS 9.3+、Android Firefox ^v79和 Android Chrome ^v85都支持它。

可以在revert CanIUse.com 页面查看当前统计数据。

Answer 2

对于初学者来说， “all:revert”永远不会对 Inte.net Explorer 起作用。 也许这就是你所看到的。 此外，“all:revert”的作用如下：

1. 清除您直接分配给元素的每个 CSS 属性值。
2. 您的元素中来自该元素之上的任何父元素的任何继承属性（通常是基于文本的字体等）现在都通过正常的 inheritance 分配给该元素。
3. 任何不可继承的属性（如显示或边框等）都将从元素中删除，并分配在浏览器 UA 样式表或用户样式表中找到的值。 该元素上那些属性的所有其他 styles 将被忽略。 这通常是浏览器附带的默认样式表，许多人称之为“重置”。
4. 这假设您没有更多选择性 styles 级联“还原”您要还原的元素上的任何属性。 “all:revert”就像任何其他 CSS 属性一样，因此任何层叠在该元素上的任何属性上的东西都会获胜。

因此，如果您为该 div 分配了一个特殊的“字体”（可继承），它将被删除，并且它现在将从您的 div 上方的父树继承级联中的字体设置。 它可能是几个父母。 但是，如果您分配了自定义“边框”值（不可继承），该值将被删除，并且将使用浏览器的 UA 样式表中分配给“div”的浏览器默认值“边框”。 对于“div 上的边框”，这几乎总是“无”。

BTW ....."all:unset" 的工作原理相同，但对于不可继承的属性退回到“初始”，这不是浏览器的默认值，甚至不是该属性的元素，而是属性本身的通用默认值，无论如何使用它的元素。 这是非常讨厌的，不是大多数人想要的。

这对您来说意味着“all:revert”的不可继承更改不会影响您孩子的 styles，因为它们无论如何都不会被继承（如显示或边框），除非您将它们设置为从您的孩子明确继承。 但是可继承的设置，如 fonts、颜色、行高等，会突然看到它们自己使用 styles 从更远的父树下降。 因为在 CSS 父母的距离不影响选择性，它不应该有更多的重量，但可能是你看到的变化。

因此，如果您看到基于文本的“怪异”，我会在您发布的这段代码上方查看从父母那里继承的新 styles。 我不会在标记块上方使用“all:revert”，因为它只会增加混乱。 如果您使用还原，请仅在特定元素上使用它以将它们单独重置为不可继承值的浏览器默认值，或者在每个元素上将可继承和不可继承的整个页面重置为浏览器默认值。