Question

我完全理解您无法对动画关键帧选择器进行分组，例如

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

你绝对必须做

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

我知道有预处理器可以为我做这一切。但我对为什么背后的原因更感兴趣？

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

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

Answer 1

请记住，at-rules和selectors是完全不同的东西。

at {规则}包含在this section of CSS2.1 spec中，该规则表明，at-rule只包含一个at-keyword，后跟一些语句（无论是以分号结尾的语句还是块）。就CSS解析器而言，你拥有的是一组三个独立的at-rules，每个供应商有一个前缀，标准有一个无前缀的规则。

at-rules的更合适的对应方式是规则集或样式规则，描述为here。规则集由选择器和声明块（包含样式声明）组成。这类似于如上所述的规则的内容。这也意味着选择器只是规则集的一部分。

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

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

但是，不是将at-rules整体分组，而是在规则开头的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 */
}

Answer 2

因为

当用户代理无法解析选择器时（即，它不是有效的CSS 2.1），它必须忽略选择器和以下声明块（如果有的话）。

因此，每个供应商前缀使整个规则对所有其他供应商都不可解析。