分组CSS @keyframes规则 [英] Grouping CSS @keyframes rules

问题描述

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

I completely understand that you cannot group animation keyframes selectors such as

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

并且您绝对必须这样做

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

我知道有些预处理器可以为我做所有这些事情.但是，我更感兴趣为什么是这种情况的原因?

I know there are pre-processors that can do all this for me. But I am more interested in the reason behind why this is the case?

我的google-fu让我失望.似乎总是把我引向stackoverflow页面，告诉他们他们不能"这样做，他们必须将他们全部分开，或者告诉人们有关预处理器的信息-或-我被送到那可怕的about.com并阅读诸如此类的内容

My google-fu is failing me. It seems to always direct me to a stackoverflow page telling someone they 'cannot' do it and they must separate them all out, or telling people about the pre-processors -or- I get sent to that horrible about.com and read stuff like

• 可以将任何选择器分组〜about.com

• Any Selector Can be Grouped ~about.com

在这种情况下显然不正确.如果有人可以引导我浏览某篇文章，或者向我解释为什么，则无法对其进行分组将是最有帮助的.

Which obviously is not true in this case. If someone can direct me to an article, or explain to me why it cannot be grouped it would be most helpful.

推荐答案

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

Keep in mind that at-rules and selectors are completely different things.

此部分CSS2.1规范<，它表示规则完全由一个关键词及其后的某些语句(以分号结尾的语句或块组成)组成.就CSS解析器而言，您拥有的是一组三个独立的规则，每个供应商一个前缀，以及该标准的一个无前缀规则.

At-rules are covered in this section of CSS2.1 spec, which says that an at-rule consists of exactly one at-keyword followed by some statement (be it a semicolon-terminated statement, or a block). As far as the CSS parser is concerned, what you have is a set of three separate at-rules, one prefix for each vendor and one unprefixed rule for the standard.

与规则相对更合适的是规则集或样式规则，如

The more appropriate counterpart to at-rules would be rule sets, or style rules, described here. A rule set consists of a selector and a declaration block (containing style declarations). This is analogous to the contents of an at-rule as described above. It also means that the selector is just one part of a rule set.

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

Certain at-rules do allow comma-separated values in their preludes, such as @media:

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

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

But instead of grouping the at-rules in entirety, the grouping happens within the value that comes after the at-keyword in the beginning of the rule.

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

This @media rule can be expanded into two separate rules like so:

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

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

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

Notice that each rule has its own @media at-keyword.

类似地，当您将多个选择器组合到一个规则中时，您拥有的是一个样式规则.分组的部分是选择器；声明块中的所有内容均适用于该组中列出的所有选择器:

Similarly, when you group multiple selectors into a single rule, what you have is one style rule. The part that is grouped is the selector; everything in the declaration block that follows applies to all the selectors that are listed in the group:

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

展开后，它将变成两个规则集:

And when you expand it, it becomes two rule sets:

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

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

这篇关于分组CSS @keyframes规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！