对CSS @keyframes规则进行分组

前端之家收集整理的这篇文章主要介绍了对CSS @keyframes规则进行分组前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我完全明白你不能将动画关键帧选择器组合起来
@keyframes,@-moz-keyframes,@-webkit-keyframes { /*do something*/ }

并且你绝对必须这样做

@keyframes { /*do something*/ }
@-moz-keyframes { /*do something*/ }
@-webkit-keyframes { /*do something*/ }

我知道有预处理器可以为我做这一切.但我更感兴趣的是为什么会出现这种情况的原因?

我的google-fu让我失望了.它似乎总是指向一个stackoverflow页面,告诉别人他们“不能”做到这一点,他们必须将它们全部分开,或者告诉人们关于预处理器 – 或者 – 我被发送到那个可怕的about.com并阅读像

> Any Selector Can be Grouped~outout.com

在这种情况下,这显然不正确.如果有人可以指导我阅读一篇文章,或者向我解释为什么它不能分组,那将是最有帮助的.

解决方法

请记住,规则和选择器是完全不同的东西.

规则在this section of CSS2.1 spec中有所描述,它表示一个at-rule只包含一个at-keyword,后跟一些语句(无论是以分号结尾的语句,还是一个块).就CSS解析器而言,你所拥有的是一组三个独立的at-rules,每个供应商有一个前缀,标准有一个无前缀的规则.

与规则相对应的更合适的是规则集或样式规则,描述为here.规则集由选择器和声明块(包含样式声明)组成.这类似于如上所述的规则的内容.它还意味着选择器只是规则集的一部分.

某些规则允许在其前奏中使用逗号分隔值,例如@media:

@media screen,projection {
    /* Styles for both screen and projection media */
}

但是,不是将整个规则分组,而是在规则开头的at-keyword之后的值内进行分组.

这个@media规则可以扩展为两个单独的规则,如下所示:

@media screen {
    /* Styles for screen media */
}

@media projection {
    /* Styles for projection media */
}

请注意,每个规则都有自己的@media at-keyword.

同样,当您将多个选择器组合到一个规则中时,您拥有的是一种样式规则.分组的部分是选择器;以下声明块中的所有内容都适用于组中列出的所有选择器:

.foo,.bar {
    /* Styles that apply to both .foo and .bar elements */
}

当你扩展它时,它变成两个规则集:

.foo {
    /* Styles that apply to .foo elements */
}

.bar {
    /* Styles that apply to .bar elements */
}

猜你在找的CSS相关文章