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

Posted 2023-03-06

【中文标题】为啥不能将特定于供应商的伪元素/类组合成一个规则集？

【英文标题】：Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?为什么不能将特定于供应商的伪元素/类组合成一个规则集？

【发布时间】：2013-06-03 15:54:58

【问题描述】：

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

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

然而，尽管我不可避免地想要应用相同的样式，而与浏览器供应商无关，但似乎不可能将它们组合成一个以逗号分隔的选择器（就像你在任何其他需要两个的 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 的一些基本部分。

谁能解释为什么会发生这种情况？

【参考方案1】：

CSS2.1states:

选择器（另请参阅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 伪类无论如何都会导致它中断。}

【讨论】：

谢谢你，非常彻底，非常有意义。还是挺郁闷的！仅供您将来参考：:-moz-placeholder 伪类是 only depreciated relatively recently 随着 FireFox 19 的引入，所以遗憾的是 :-moz-placeholder 和它的双冒号后继 ::-moz-placeholder 目前必须使用以确保最佳的浏览器覆盖率。

【参考方案2】：

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

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

选择器（参见选择器模块 [SELECT]）由直到（但不包括）第一个左花括号 () 的所有内容组成。选择器总是与 块一起使用。当用户代理无法解析选择器（即它不是有效的 CSS3）时，它也必须忽略 块。

【讨论】：

这里的链接对我不起作用（没有导致引用的文本）；我找到了这个：w3.org/TR/selectors/#Conformance>。 IMO，像input:-moz-placeholder,:-any-other-bogus-selector 这样的解析选择器列表应该没有问题，因此规则应该起作用，并且丢弃它的浏览器违反规则这样做。