覆盖 CSS 属性全部：未设置

Question

对于我正在开发的 CSS 框架，我正在使用 all: unset，它本身工作正常：

#foo { all: unset; }

但是，在某些情况下，我想"undo"这条规则的效果，如

#foo:hover { all: auto; }

但是，这显然是行不通的，因为all没有auto的值。相反，我们有值 inherit 和 initial，它们与 "cancelling" 和 all 属性不同，具有不同的效果：将所有值恢复为其父值，或它们的初始值（我假设这意味着系统级默认值）。

为了完成我想要的，我正在做

#foo:not(:hover) { all: unset; }

工作正常，但如果我想为多个伪类执行此操作，则可扩展性不太好，我更愿意覆盖 all: unset 属性？有什么办法吗？

Answer 1

你试过了吗

all: revert

这里有更多信息MDN

Answer 2

all 属性指定后似乎无法撤消其效果。这可能是由于 all 是 shorthand 属性（碰巧只接受 CSS 范围内的关键字作为值）。

您不能从级联中删除 shorthand 声明，就像 css-cascade-4 引入的 revert 关键字允许您删除作者级声明一样，那是因为 shorthand 属性在级联中不作为自己的实体存在；相反，它只是代表其所有组件属性。与更传统的 shorthand 属性（例如 background 和 font 一样，覆盖已应用的 shorthand 声明的唯一方法是重新指定通过普通声明或通过另一个 shorthand 声明覆盖的普通文本。但是你不能用 all 属性做后者，因为它只接受 CSS-wide 关键字。

由于前者显然不适用于 all shorthand，因为您无法预测哪些作者级声明会被覆盖，您唯一的选择是限制它通过一个选择器，从而防止它从一开始就应用于特定情况。希望我们能在不久的将来看到更多级别 4 :not() 的实现，这将使编写选择器更容易一些。

Answer 3

除了 BoltClock 解释的内容之外，即使对于非 shorthand 属性，您想要的目前也是不可能的。

* { color: red; }
#foo { color: unset; }
#foo:hover { color: /* How to revert to red? */ }

一旦您添加了一个赢得级联的值，就无法告诉级联 "go back" 并取而代之的是前一个获胜者。您必须明确设置它，但这只有在您知道的情况下才有可能。

最接近的是 revert keyword，由 CSS Cascade 4 引入，它将级联回滚到之前的原始级别。但是目前无法将级联回滚到同一来源级别的前一个获胜者。

然后，解决方案是限制您的选择器仅在您需要时应用。这样就不用撤销了

覆盖 CSS 属性 全部：未设置

Overriding CSS property all: unset

css

css-cascade

覆盖 CSS 属性全部：未设置