7

我只是尝试编写以下规则来为支持它的浏览器设置输入占位符的样式：

#main input::-webkit-input-placeholder,
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

问题是没有应用该规则。但是，如果我像这样分解它，它就可以正常工作：

#main input::-webkit-input-placeholder
{
    color: #888;
    font-style: italic;
}
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

为什么我不能对特定于浏览器的选择器进行分组，或者有其他方法吗？对同一个元素重复两次相同的属性感觉不对。

更新：

刚刚发现这个资源说它不能完成，但到目前为止还没有关于原因的信息。浏览器仅仅因为不能识别其中一个选择器就不得不放弃整个规则，这似乎很奇怪。

4

3 回答 3

8

如果一组选择器中的一个选择器无效，则浏览器必须将整个规则视为无效。或者至少W3C 是这么说的。

我不确定为什么这种行为是强制性的，但在推动时，我猜这是因为无效的选择器可能会破坏一般的 CSS 语法，使浏览器无法可靠地猜测无效选择器的结束位置和有效元素的开始位置。

于 2012-05-23T22:01:09.137 回答
0

最有可能的是，某些浏览器会丢弃整个定义，因为它们认为选择器无效。

于 2012-05-23T21:49:38.423 回答
0

如果您愿意使用 JavaScript，请查看 -prefix-free 脚本。它允许您为这些 CSS 属性省略供应商特定的前缀（例如 -webkit- 或 -moz-）。

于 2012-05-23T22:12:37.023 回答