为什么不能将特定于浏览器的CSS选择器分组应用于不同的浏览器？

Question

我刚刚试图编写以下规则，以样式化支持它的浏览器中的输入占位符：

#main input::-webkit-input-placeholder,
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

问题在于规则没有被应用。然而，如果我像这样分开它，那么它就可以正常工作：

#main input::-webkit-input-placeholder
{
    color: #888;
    font-style: italic;
}
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

为什么不能将特定于浏览器的选择器分组，或者是否有其他方法可以实现？重复为同一元素写入相同的属性不太合适。

更新：刚刚发现这个资源指出无法完成此操作，但目前还没有关于原因的信息。浏览器应该不会因为无法识别其中一个选择器而放弃整个规则，这似乎很奇怪。

- Christofer Eliasson

Answer 1

如果选择器组中的一个选择器无效，浏览器必须将整个规则视为无效。或者至少这是W3C所说的。

我不确定为什么要强制执行这种行为，但是在紧急情况下，我猜想这是因为无效的选择器可能会破坏常规CSS语法，使浏览器无法可靠地猜测无效选择器何时结束，有效元素从哪里开始。

- Jimmy Breck-McKye

---

谢谢提供源代码，这解释了为什么它被作废了！我猜当你这样说时忽略整个规则是有道理的。这是一个比较特殊的情况，所以我想这没关系，但是重复代码感觉有点混乱。 - Christofer Eliasson

@boltclock 感谢您的额外阅读，有趣的是我在 Chrome 中调试了这个特定的代码，它没有应用我的第一个示例中的规则。WebKit 开始遵守这个规则了吗？ - Christofer Eliasson

@Christofer Eliasson: 嗯，结果证明WebKit的行为可能并非故意的。我刚刚发现，在你的情况下它不起作用是因为WebKit只有选择性地忽略带前缀的伪元素（例如::-moz-selection），而不是带前缀的伪类（例如你例子中的:-moz-placeholder）。其中一个Chrome开发人员和CSSWG成员刚刚告诉我，这似乎并非故意之举。 - BoltClock

Answer 2

很可能，一些浏览器会丢弃整个定义，因为它们认为选择器无效。

- lanzz

Answer 3

如果你愿意使用JavaScript，请查看-prefix-free脚本。它允许您省略CSS属性的供应商特定前缀（例如-webkit-或-moz-）。

- Grezzo

---

以前没用过，你确定它适用于特定于浏览器的选择器吗？据我所见，文档只提到了CSS属性。 - Christofer Eliasson