对于我正在开发的CSS框架,我正在使用all: unset
,它本身可以正常工作:
#foo { all: unset; }
但是,在某些情况下,我想“撤消”此规则的效果,如
#foo:hover { all: auto; }
但是,这显然不起作用,因为auto
没有all
的值。相反,我们使用值inherit
和initial
,而不是“取消”all
属性,具有不同的效果:将所有值还原为其父级值或初始值(I假设这意味着系统级默认值。)
要完成我想要的,我现在正在做
#foo:not(:hover) { all: unset; }
哪个工作正常,但如果我想为多个伪类执行此操作,则不太可伸缩,例如,我宁愿覆盖all: unset
属性?有没有办法这样做?
答案 0 :(得分:2)
一旦指定了all
属性,似乎无法撤消它的效果。这可能是由于all
是一个速记属性(恰好只接受CSS范围的关键字作为值)。
你无法从级联中删除速记声明,就像css-cascade-4引入revert
关键字允许你擦除作者级声明一样,这是因为速记属性不会在级联中作为自己的实体存在;相反,它只是代表其所有组件属性。与更传统的速记属性(如background
和font
)一样,覆盖已应用的速记声明的唯一方法是重新指定被覆盖的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)