css - 分组 CSS @keyframes 规则

Question

我完全理解您不能将动画关键帧选择器分组，例如

@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 ~about.com

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

Answer 1

请记住，at 规则和选择器是完全不同的东西。

@ 规则包含在 this section of CSS2.1 spec 中，它表示一个 at 规则恰好由一个 at 关键字后跟一些语句(可以是分号终止的语句或 block )组成。就 CSS 解析器而言，您拥有的是一组三个独立的 at 规则，一个用于每个供应商的前缀和一个用于标准的无前缀规则。

at 规则更合适的对应物是规则集或样式规则，描述 here .一个规则集由一个选择器和一个声明 block (包含样式声明)组成。这类似于上面描述的 at 规则的内容。这也意味着选择器只是规则集的一部分。

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

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

但是不是对整个 at 规则进行分组，而是在规则开头的 at 关键字之后的值内进行分组。

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

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

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

请注意，每个规则都有自己的 @media at 关键字。

类似地，当您将多个选择器组合成一个规则时，您拥有的是一个样式规则。分组的部分是选择器；以下声明 block 中的所有内容都适用于组中列出的所有选择器:

.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 */
}