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

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 指出：

选择器（也见部分选择）包括了一切的（但不包括）第一个左花括号（{）。选择器始终与声明块一起使用。当用户代理无法html" target="_blank">解析选择器时（即，它不是有效的CSS2.1），它必须忽略选择器以及随后的声明块（如果有）。

请注意，由于CSS2.1早于CSS3，因此在假设用户代理完全符合CSS2.1且理论上不存在CSS3的前提下编写“它不是有效的CSS
2.1”。在实践中，无论规范说“它不是有效的CSS”还是类似的含义，都应理解为“用户代理不理解”。

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

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