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

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

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

但是，尽管我不可避免地希望使用相同的样式，而与浏览器供应商无关，但似乎无法将它们组合成一个逗号分隔的选择器（就像您想要两个选择器共享的其他CSS一样）相同的样式）。

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


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


（尽管支持:-moz-placeholder的::-moz-placeholder is being deprecated仅发生在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的某些基本部分我不了解。

谁能说明为什么会这样？

最佳答案

CSS2.1 states：


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


请注意，由于CSS2.1早于CSS3，因此在假定用户代理完全符合CSS2.1且理论上不存在CSS3的前提下编写“它不是有效的CSS 2.1”。在实践中，无论规范说“它不是有效的CSS”还是类似的含义，都应理解为“用户代理不理解”。有关更深入的解释，请参见我对this related question的回答。

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

有关为何制定此规则的一些见解，请参见this answer。



1请注意，WebKit因部分违反此规则而臭名昭著：解析其选择器具有无法识别的前缀伪元素（在本例中为::-moz-placeholder）的规则没有问题。就是说，组合规则中的:-moz-placeholder伪类将导致它无论如何都被破坏。

关于css - 为什么不能将特定于供应商的伪元素/类组合到一个规则集中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30441811/