为什么逗号分隔的占位符规则不能在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; 
} 

Answer 2

我知道它现在是一个完整的答案，但你可以为每个输入

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

 

 

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

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