覆盖CSS属性all:unset

6 css css-cascade

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

#foo { all: unset; }
Run Code Online (Sandbox Code Playgroud)

但是,在某些情况下,我想"撤消"此规则的效果,如

#foo:hover { all: auto; }
Run Code Online (Sandbox Code Playgroud)

但是,这显然不起作用,因为没有autofor的价值all.取而代之的是,我们拥有的价值观inherit和initial,这不是"取消"的all属性,有不同的效果:恢复所有值父母的价值,或者他们最初的(我想这意味着系统级的默认值).

为了实现我想要的,我现在正在做

#foo:not(:hover) { all: unset; }
Run Code Online (Sandbox Code Playgroud)

如果我想为多个伪类执行此操作,它可以正常工作,但是不太可伸缩,例如,我宁愿覆盖all: unset属性?有没有办法这样做?

Bol*_*ock 2

all一旦指定该属性,似乎就无法撤消该属性的影响。这可能是由于它all是一个简写属性(恰好只接受 CSS 范围的关键字作为值)。

您无法从级联中删除简写声明,就像 css-cascade-4 引​​入关键字revert允许您删除作者级声明一样,这是因为简写属性在级联中不作为其自己的实体存在; 相反,它只是表示其所有组件属性。与更传统的简写属性(例如background和 )一样font,覆盖已应用的简写声明的唯一方法是通过普通声明或另一个简写声明重新指定被覆盖的简写值。但您不能使用该all属性执行后者,因为它只接受 CSS 范围的关键字。

由于前者显然对于速记来说不切实际all,因为您无法预测哪些作者级别的声明一开始就会被覆盖,所以您唯一的其他选择是通过选择器限制它,从而防止它在特定情况下应用首先。希望在不久的将来我们会看到更多级别 4 的实现:not(),这将使编写选择器变得更加容易。