覆盖CSS属性all:unset

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

#foo { all: unset; }

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

#foo:hover { all: auto; }

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

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

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

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

解决方法

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

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

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效