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

Question

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

这些都共享相同的基本属性(即:文本样式和颜色声明)。

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

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

• 输入:-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 :

The selector (see also the section on selectors) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a declaration block. When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

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

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

有关为什么制定这样的规则的一些见解，请参阅 this answer .

---

¹ _{请注意，WebKit 因部分违反此规则而臭名昭著:它可以毫无问题地解析其选择器具有无法识别的前缀伪元素(在本例中为 ::-moz-占位符)。也就是说，组合规则中的 :-moz-placeholder 伪类无论如何都会导致它中断。}