Question

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

这些都具有相同的基本属性（即：文本样式和颜色声明）。

然而，虽然我不可避免地想要应用相同的样式而不管浏览器供应商，但似乎不可能将它们组合成逗号分隔的选择器（就像你想要两个CSS的任何其他CSS一样）选择器共享相同的样式）。

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

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

（虽然:-moz-placeholder is being deprecated支持::-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 states：

选择器（另见selectors部分）包括第一个左大括号（{）的所有内容（但不包括）。选择器总是与声明块一起使用。当用户代理无法解析选择器时（即，它不是有效的CSS 2.1），它必须ignore选择器和以下声明块（如果有的话）。

请注意，由于CSS2.1早于CSS3，“它无效CSS 2.1”是在用户代理完全符合CSS2.1并且理论上不存在CSS3的假设下编写的。在实践中，无论规范说“它不是有效的CSS”或其他类似的东西，它应该被理解为“用户代理不理解它”。请参阅我对this related question的回答，以获得更深入的解释。

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

有关为何这样的规则的一些见解，请参阅this answer。

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

Answer 2

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

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

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

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

2 个答案: