为什么逗号分隔的占位符规则不能在CSS中应用？

Question

如果我对ID为id的输入元素应用以下规则，#one则占位符颜色将发生变化，

#one::-webkit-input-placeholder {
  color: red;
}

但是，如果我使用逗号分隔符来组合不同浏览器的占位符规则，则该颜色将不适用，例如

#two::-webkit-input-placeholder,
#two::-moz-placeholder{
  color: red;
}

工作示例：

#one::-webkit-input-placeholder {
  color: red;
}

#two::-webkit-input-placeholder,
#two::-moz-placeholder{
  color: red;
}

为什么#two占位符不将其颜色更改为红色？

Answer 1

这是因为浏览器只会将规则应用到可以完全解释的选择器中。
对于Webkit类型的浏览器，它-webkit-input-placeholder是有效的，但-moz-placeholder不是有效的，因此它会浪费整个选择器，反之亦然，对于基于Geeko的浏览器来说，反之亦然。
解决方案是分离浏览器特定的选择器。

#two::-webkit-input-placeholder{
  color: red;
}
#two::-moz-placeholder{
  color: red;
}