Browser 为什么我不能为不同的浏览器分组特定于浏览器的CSS选择器?

Browser 为什么我不能为不同的浏览器分组特定于浏览器的CSS选择器?,browser,css,cross-browser,css-selectors,Browser,Css,Cross Browser,Css Selectors,我只是尝试编写以下规则,为支持输入占位符的浏览器设置输入占位符的样式: #主输入::-webkit输入占位符, #主输入:-moz占位符 { 颜色:#888; 字体:斜体; } 问题是这条规则不适用。但是,如果我像这样分解它,它就可以正常工作: #主输入::-webkit输入占位符 { 颜色:#888; 字体:斜体; } #主输入:-moz占位符 { 颜色:#888; 字体:斜体; } 为什么我不能将特定于浏览器的选择器分组,或者是否有其他方法可以这样做?对同一个元素重复相同的属性两次是不对

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

#主输入::-webkit输入占位符,
#主输入:-moz占位符
{
颜色:#888;
字体:斜体;
}
问题是这条规则不适用。但是,如果我像这样分解它,它就可以正常工作:

#主输入::-webkit输入占位符
{
颜色:#888;
字体:斜体;
}
#主输入:-moz占位符
{
颜色:#888;
字体:斜体;
}
为什么我不能将特定于浏览器的选择器分组,或者是否有其他方法可以这样做?对同一个元素重复相同的属性两次是不对的

更新:


刚发现说这是不可能的,但到目前为止还没有关于原因的信息。奇怪的是,浏览器只需要放弃一个选择器就放弃了整个规则。

最有可能的是,有些浏览器放弃了整个定义,因为他们不认为选择器是有效的。

< P>如果一组选择器中的一个选择器无效,浏览器必须将整个规则视为无效。至少是这样


我不知道为什么强制执行这种行为,但我猜这是因为无效的选择器可能会破坏常规CSS语法,使浏览器无法可靠地猜测无效选择器的结束位置和有效元素的开始位置。

如果您愿意使用JavaScript,请查看无前缀脚本。它允许您为类似的CSS属性省去特定于供应商的前缀(例如-webkit-或-moz-)。

感谢您提供的源代码,这解释了为什么它是无效的!我想当你这样说的时候,忽略整个规则是有道理的。这是一个有点偏僻的例子,所以我想这没关系,但是你必须重复你的代码,这感觉有点混乱。@boltclock谢谢你的额外阅读,有趣的是我在Chrome中调试了这段特定的代码,但在我的第一个示例中它没有应用规则。WebKit已经开始遵守这条规则了吗?@Christofer Eliasson:嗯,结果可能根本不是故意的。我刚刚发现它在您的情况下不起作用,因为WebKit只选择性地忽略带前缀的伪元素(如
:-moz selection
),而不忽略带前缀的伪类(如示例中的
:-moz placeholder
),而且以前没有使用过它,您确定它也适用于特定于浏览器的选择器吗?文档中只提到了CSS属性。