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

在CSS中，可以使用特定于供应商的伪类和伪元素组合在输入中设置

占位符

文本的样式（以获得最佳的跨浏览器覆盖率）

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

然而，尽管我不可避免地希望应用相同的样式，而不考虑浏览器供应商，但似乎不可能将这些样式组合成逗号分隔的选择器（就像您希望两个选择器共享相同样式的任何其他CSS一样）

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

• input:-moz占位符

• input:：-moz占位符

• input:-ms输入占位符

• input:：-webkit输入占位符

（虽然

：-moz占位符

支持

：：-moz占位符

，但这只发生在FireFox 19发布时，因此目前这两种占位符都需要更好的浏览器支持）

令人沮丧的是，声明和给出每个（相同）样式会导致CSS中大量重复

因此，为了确保占位符文本是右对齐和斜体的，我将使用：

input:-moz占位符{
字体：斜体；
文本对齐：右对齐；
}
输入：：-moz占位符{
字体：斜体；
文本对齐：右对齐；
}
输入：-ms输入占位符{
字体：斜体；
文本对齐：右对齐；
}
输入：：-webkit输入占位符{
字体：斜体；
文本对齐：右对齐；
}

我真正想做的是将它们合并为一个逗号分隔的规则集，如下所示：

input:-moz占位符，
输入：：-moz占位符，
输入：-ms输入占位符，
输入：：-webkit输入占位符{
字体：斜体；
文本对齐：右对齐；
}

然而，尽管在相当多的场合尝试过这一点，但这似乎从未奏效。这让我担心CSS的一些基本部分我不理解

---

有人能解释为什么会发生这种情况吗？

规范中说，如果用户代理无法识别选择器的一部分，则必须忽略整个选择器及其块

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

CSS2.1：

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

请注意，由于CSS2.1早于CSS3，“无效CSS 2.1”是在假设用户代理完全符合CSS2.1且理论上不存在CSS3的情况下编写的。在实践中，如果规范中说“无效CSS”或类似内容，则应将其理解为“用户代理不理解”.有关更深入的解释，请参见我的答案

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

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

---

---

1请注意，WebKit因部分藐视此规则而臭名昭著：它在解析其选择器具有无法识别的前缀伪元素（在本例中为

：-moz占位符

）的规则时没有问题也就是说，你的组合规则中的

：-moz占位符

伪类无论如何都会导致它被破坏。

谢谢你，非常彻底，非常有意义。仍然很令人沮丧！仅供你将来参考：

：-moz占位符

伪类是随着FireFox 19的推出而出现的，非常遗憾的是

：-moz占位符

和它的双冒号继承者

：-moz占位符

目前必须使用，以确保最佳的浏览器覆盖率。这里的链接对我不起作用（因为没有指向引用的文本）；我发现了这个：。在我看来，解析诸如

input:-moz占位符、：-任何其他虚假选择器等选择器列表应该没有问题，因此该规则应该有效，而删除它的浏览器违反了规则。