css - 为什么逗号分隔的占位符规则没有在 css 中应用？

Question

如果我将以下规则应用于 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;
}

<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">

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

Answer 1

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

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