为什么不能将供应商特定的伪元素/类组合到一个规则集中？

在 CSS 中可以设置样式placeholder使用特定于供应商的伪类和伪元素的组合来输入输入中的文本（以获得最佳的跨浏览器覆盖率）。

这些都共享相同的基本属性（即：文本样式和颜色声明）。

然而，虽然我不可避免地想要应用相同的样式，而不管浏览器供应商如何，但似乎不可能将它们组合成一个逗号分隔的选择器（就像您希望两个选择器共享的任何其他 CSS 片段一样）相同的风格）。

例如，我倾向于使用以下四个选择器来定位占位符样式：

• input:-moz-placeholder
• input::-moz-placeholder
• input:-ms-input-placeholder
• input::-webkit-input-placeholder

（虽然:-moz-placeholder 正在被弃用有利于::-moz-placeholder这仅在 FireFox 19 发布时发生，因此目前需要两者来获得更好的浏览器支持）。

令人沮丧的是，声明并赋予每个（相同）样式会导致 CSS 中出现大量重复。

因此，为了确保占位符文本右对齐且斜体，我最终会得到：

input:-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input::-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input:-ms-input-placeholder{
    font-style: italic;
    text-align: right;
}
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

我真正想做的是将它们组合成一个逗号分隔的规则集，如下所示：

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

然而，尽管尝试过几次，但这似乎从未奏效。这让我担心 CSS 的一些基本部分我不理解。

任何人都可以解释为什么会发生这种情况吗？

CSS2.1 states:

选择器（另请参阅有关选择器) 由直到（但不包括）第一个左大括号 ({) 的所有内容组成。选择器总是与声明块一起使用。当用户代理无法解析选择器时（即，它不是有效的 CSS 2.1），它必须ignore选择器和下面的声明块（如果有）。

请注意，由于 CSS2.1 早于 CSS3，因此“它不是有效的 CSS 2.1”是在用户代理完全符合 CSS2.1 并且 CSS3 理论上不存在的假设下编写的。在实践中，只要规范说“它不是有效的 CSS”或类似的内容，就应该理解为“用户代理无法理解它”。请参阅我的回答这个相关问题以获得更深入的解释。

Namely, since one vendor's browser doesn't understand other vendors' prefixes, it has to drop any rules that contain those unrecognized prefixes in pseudo-class and pseudo-element selectors.¹

对于一些见解why制定了这样的规则，参见这个答案.

¹ _{Note that WebKit is notorious for partially flouting this rule: it has no trouble parsing rules whose selectors have unrecognized prefixed pseudo-elements (which in this case is ::-moz-placeholder). That said, the :-moz-placeholder pseudo-class in your combined rule will cause it to break anyway.}