Question

请参阅this question的答案。我写CSS规则：

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

因此firefox无法识别其元素（-moz-placeholder和-moz-placeholder）。为什么？可以在一个CSS规则中编写所有这个伪元素吗？

Answer 1

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

警告：此示例中的等效项为true，因为全部选择器是有效的选择器。如果只有其中一个选择器无效，整个选择器列表将无效。这个会使所有三个标题元素的规则无效，而在前一种情况只有三个单独的标题规则中的一个无效。

Answer 2

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

同样适用于webkit和IE。

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

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

正如您所看到的，您可以将-moz-两者放在同一规则中，因为Firefox会同时识别它们。（它们也意味着同样的事情，因此将它们放在规则中是多余的，但它有效，所以无关紧要。）

Fiddle

编辑：如注释中所示，Mozilla选择器的单冒号版本不起作用，只有双冒号版本才有效。（在最新版本中，这里没有旧版本）。但是单冒号版本不被认为是错误，否则这个CSS就不会有效。

是否可以为几个带前缀的选择器编写一个CSS规则？

2 个答案: