css - 是否可以为多个前缀选择器编写一个 CSS 规则？

Question

请参阅此问题的答案。我写CSS规则：

::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder {
    color:    #999;
}

所以火狐无法识别它的元素（-moz-placeholder 和 -moz-placeholder）。为什么？是否可以在一个 CSS 规则中编写所有这些伪元素？

Answer 1

简短的回答：没有。此行为符合 W3C 规范（参见 4.1）。也就是说，如果任何选择器列表包含一个或多个无效的选择器，则整个选择器列表都被视为无效，因此您不能对特定于浏览器的选择器进行分组。

警告：在这个例子中等价是真的，因为所有的选择器都是有效的选择器。如果这些选择器中只有一个无效，则整个选择器列表将无效。这将使所有三个标题元素的规则无效，而在前一种情况下，三个单独的标题规则中只有一个无效。

Answer 2

根据 Firefox，选择器有错误；无法识别的伪类。因此，根据定义，该规则被完全忽略。

webkit 和 IE 也是如此。

因此，解决方案是将这些规则拆分为多个规则，正如另一个问题的答案所示。

::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder,::-moz-placeholder {
    color:    #999;
}
:-ms-input-placeholder {
    color:    #999;
}

如您所见，您可以将两个 -moz- 放在同一规则中，因为 Firefox 可以识别它们。（它们也意味着同样的事情，因此将它们都放在规则中是多余的，但它有效，所以没关系。）

小提琴

编辑：如评论中所示，Mozilla 选择器的单冒号版本不起作用，只有双冒号版本起作用。（在最新版本中，这里没有旧版本）。但是单冒号版本不被认为是错误，否则这个 CSS 将无法正常工作。