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 spec：

选择器总是与声明块一起使用。当用户代理无法解析选择器时（即，它不是有效的CSS 2.1），它必须ignore选择器和以下声明块（如果有的话）。

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

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

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

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

占位符CSS调用问题

1 个答案: