占位符 CSS 调用问题

通常我们使用这个想法（不同的类用逗号分隔）.测试，.test1 {}，但是这里只要我们单独调用类就可以正常工作。

为什么会出现这个问题？ 演示在这里http://jsfiddle.net/6AR8n/ http://jsfiddle.net/6AR8n/

/* seperate classes  */

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



/* Classes with coma */

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




<div id="red">
    <input type="text"  placeholder="Without Coma" >
</div>
<br>
 <div id="green">
    <input type="text"  placeholder="Coma" >
</div>

这是因为浏览器在遇到无法识别的选择器时应该放弃整个规则。来自CSS2.1规范 http://www.w3.org/TR/CSS21/syndata.html#rule-sets:

选择器总是与声明块一起使用。当用户代理无法解析选择器时（即，它不是有效的 CSS 2.1），它必须ignore http://www.w3.org/TR/CSS21/syndata.html#ignore选择器和下面的声明块（如果有）。

这包括前缀选择器，例如:-moz-placeholder and ::-webkit-input-placeholder在您的示例中，因为浏览器不应该尝试解析它不支持的前缀；对于某个解析器来说，外部前缀与任何其他语法错误一样无效。

另外，正如评论中提到的#green部分需要在逗号分隔组中的两个选择器上复制，如下所示：

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

但这与当前的问题完全无关。