6

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

#foo { all: unset; }

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

#foo:hover { all: auto; }

但是,这显然不起作用,因为autofor没有值all。相反,我们有值inheritand initial,而不是“取消”该all属性,而是具有不同的效果:将所有值恢复为其父值或初始值(我假设这意味着系统级默认值)。

为了完成我想要的,我目前正在做

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

例如,如果我想为多个伪类执行此操作,并且我更愿意覆盖该all: unset属性,那么它工作得很好,但不是太可扩展?有什么办法吗?

4

3 回答 3

2

all一旦指定了属性,似乎就无法撤消该属性的效果。这可能是因为它all是一个速记属性(恰好只接受 CSS 范围的关键字作为值)。

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

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

于 2016-04-08T09:46:58.637 回答
2

除了 BoltClock 解释的内容之外,即使对于非速记属性,您现在也无法实现。

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

一旦添加了赢得级联的值,就无法告诉级联“返回”并获得前一个获胜者。您必须明确设置它,但这只有在您知道它的情况下才有可能。

最接近的是 CSS Cascade 4 引入的revert关键字,它将级联回滚到之前的原始级别。但是目前不可能将级联回滚到同源级别的先前获胜者。

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

于 2016-04-09T18:20:48.970 回答
0

你有没有尝试过

all: revert

更多信息在这里MDN

于 2016-04-08T09:46:51.870 回答