微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

覆盖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(),这将使编写选择器变得更容易一些.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。