4

通常我们使用这个想法（不同的类用逗号分隔）.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>
4

1 回答 1

6

这是因为浏览器在遇到无法识别的选择器时应该丢弃整个规则。来自CSS2.1 规范：

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

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

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

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

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

于 2012-12-29T13:52:56.193 回答