占位符CSS调用问题

Question

通常我们使用这个想法(用逗号分隔的不同类).Test,.test1 {},但是这里只有我们分别调用类才能正常工作.

为什么这个问题？在这里演示 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>

Answer 1

这是因为浏览器在遇到无法识别的选择器时应该删除整个规则.从CSS2.1规范:

选择器总是与声明块一起使用.当用户代理无法解析选择器(即,它不是有效的CSS 2.1)时,它必须忽略选择器和以下声明块(如果有的话).

这包括前缀的选择,就像:-moz-placeholder和::-webkit-input-placeholder你的榜样,因为浏览器是不应该试图解析一个前缀,它不支持; 对于某个解析器,外部前缀与任何其他语法错误一样无效.

另外,如评论中所述,#green需要在逗号分隔组中的两个选择器上复制该部分,如下所示:

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

但这与手头的问题完全无关.