为什么我不能为不同的浏览器分组特定于浏览器的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;
}

为什么我不能对浏览器特定的选择器进行分组，还是有其他方法可以做到这一点？对同一元素重复两次相同的属性是不对的。

更新

刚刚找到this resource表示无法完成，但到目前为止还没有关于原因的信息。看起来奇怪的是，浏览器必须放弃整个规则，因为它无法识别其中一个选择器。

Answer 1

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

我不确定为什么会出现这种行为，但我认为这是因为无效的选择器可能会破坏一般的CSS语法，使浏览器无法可靠地猜出无效选择器的结束和有效元素开始。

Answer 2

最有可能的是，某些浏览器会丢弃整个定义，因为他们认为选择器无效。

Answer 3

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