为什么不可能将特定于供应商的伪元素/类组合到一个规则集中？

Question

在CSS中,可以placeholder使用特定于供应商的伪类和伪元素的组合来在输入中设置文本样式(以获得最佳的跨浏览器覆盖率).

这些都具有相同的基本属性(即:文本样式和颜色声明).

然而,虽然我不可避免地想要应用相同的样式而不管浏览器供应商,但似乎不可能将它们组合成逗号分隔的选择器(就像您希望两个选择器共享的任何其他CSS一样)相同的风格).

作为一个例子,我倾向于使用以下四个选择器来定位占位符样式:

• input:-moz-placeholder
• input::-moz-placeholder
• input:-ms-input-placeholder
• input::-webkit-input-placeholder

(虽然:-moz-placeholder 被弃用赞成::-moz-placeholder所以目前两者都需要更好的浏览器的支持,这只是发生与Firefox 19发布).

令人沮丧的是,声明和赋予每种(相同)样式会导致CSS中的大量重复.

因此,为了确保占位符文本是右对齐和斜体,我最终会得到:

input:-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input::-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input:-ms-input-placeholder{
    font-style: italic;
    text-align: right;
}
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

我真正想要做的是将它们组合成一个单独的逗号分隔规则集,如下所示:

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

然而,尽管在相当多的时间尝试过,但这似乎永远不会奏效.这让我担心CSS有一些我不理解的基本部分.

有人可以解释为什么会这样吗？

Answer 1

CSS2.1 规定:

选择器(也见部分选择)包括了一切(但不包括)第一个左大括号中({).选择器总是与声明块一起使用.当用户代理无法解析选择器(即,它不是有效的CSS 2.1)时,它必须忽略选择器和以下声明块(如果有的话).

请注意,由于CSS2.1早于CSS3,"它无效CSS 2.1"是在用户代理完全符合CSS2.1并且理论上不存在CSS3的假设下编写的.在实践中,无论规范说"它不是有效的CSS"或其他类似的东西,它应该被理解为"用户代理不理解它".有关更深入的解释,请参阅我对此相关问题的回答.

也就是说,由于一个供应商的浏览器不了解其他供应商的前缀,因此必须删除在伪类和伪元素选择器中包含那些无法识别的前缀的任何规则.¹

有关为什么要制定此规则的一些见解,请参阅此答案.

¹ _{请注意,WebKit因部分藐视此规则而臭名昭着:它可以解析其选择器具有无法识别的前缀伪元素(在本例中为::-moz-placeholder)的规则.也就是说,:-moz-placeholder组合规则中的伪类无论如何都会导致它破坏.}

Answer 2

规范说如果用户代理不能识别选择器的一部分,它必须忽略整个选择器及其块.

http://www.w3.org/TR/css3-syntax/#rule-sets

选择器(参见选择器模块[SELECT])包含第一个左大括号({)的所有内容(但不包括).选择器总是与{} -block一起使用.当用户代理无法解析选择器时(即,它不是有效的CSS3),它也必须忽略{} -block.