覆盖CSS属性all:unset

时间:2016-04-08 09:36:31

标签: css css-cascade

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

#foo { all: unset; }

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

#foo:hover { all: auto; }

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

要完成我想要的,我现在正在做

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

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

3 个答案:

答案 0 :(得分:2)

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

你无法从级联中删除速记声明,就像css-cascade-4引入revert关键字允许你擦除作者级声明一样,这是因为速记属性不会在级联中作为自己的实体存在;相反,它只是代表其所有组件属性。与更传统的速记属性(如backgroundfont)一样,覆盖已应用的速记声明的唯一方法是重新指定被覆盖的longhands的值,或者通过longhand重写声明或通过另一个速记声明。但是你不能用all属性来做后者,因为它只接受CSS范围的关键字。

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

答案 1 :(得分:2)

除了BoltClock解释的内容之外,即使对于非速记属性,目前也无法获得所需的内容。

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

一旦你添加了一个赢得级联的值,就无法告诉级联到"返回"并取代以前的赢家。您必须明确地设置它,但只有在您知道的情况下才能设置它。

最接近的是由CSS Cascade 4引入的revert keyword,它将级联回滚到以前的原始级别。但是目前不可能将级联滚回到同一起源级别的前一个获胜者。

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

答案 2 :(得分:0)

你试过吗

all: revert

此处有更多信息MDN