是否可以为多个前缀选择器编写一个 CSS 规则？答案

【问题标题】：Is it possible to write one CSS rule for several prefixed selectors?是否可以为多个前缀选择器编写一个 CSS 规则？
【发布时间】：2013-10-28 20:12:55
【问题描述】：

查看this question 的答案。我写 CSS 规则：

::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder {
    color:    #999;
}

因此 firefox 无法识别其元素（-moz-placeholder 和 -moz-placeholder）。为什么？是否可以在一个 CSS 规则中编写所有这些伪元素？

【问题讨论】：

如果你必须写很多这样的代码，我推荐使用 CSS 预处理器，比如LESS（LESS 是 CSS 的一种“超集”，所以所有 CSS 也是有效的 LESS ，所以很容易使用）。
@RobW 除非 LESS 有与 Sass 中的 @content 指令相当的东西，否则 LESS 不能以抽象的方式合理地做到这一点（参见：stackoverflow.com/a/17181946/1652962）。

标签： css css-selectors pseudo-element

【解决方案1】：

简短的回答：不。此行为符合 W3C 规范 (see 4.1)。也就是说，如果任何选择器列表包含一个或多个无效选择器，则整个选择器列表都被视为无效，因此您无法对特定于浏览器的选择器进行分组。

警告：在这个例子中等价是正确的，因为所有的选择器是有效的选择器。如果这些选择器中只有一个是无效，则整个选择器列表将无效。这个会使所有三个标题元素的规则无效，而在前一种情况，三个单独的标题规则中只有一个是无效。

【讨论】：

【解决方案2】：

根据Firefox，选择器有错误；无法识别的伪类。因此，根据定义，该规则被完全忽略。

同样适用于 webkit 和 IE。

因此解决方案是将这些规则拆分为多个规则，正如另一个问题的答案所示。

::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder,::-moz-placeholder {
    color:    #999;
}
:-ms-input-placeholder {
    color:    #999;
}

如您所见，您可以将两个 -moz- 放在同一规则中，因为 Firefox 可以识别它们。（它们也意味着同样的事情，因此将它们都放在规则中是多余的，但它有效，所以没关系。）

Fiddle

编辑：如 cmets 所示，Mozilla 选择器的单冒号版本不起作用，只有双冒号版本起作用。（在最新版本中，这里没有旧版本）。但是单冒号版本不被认为是错误，否则这个 CSS 不会起作用。

【讨论】：

您的最后一段不正确 - 在最新版本的 Firefox 中，伪类已切换为伪元素，因此并非所有版本都同时支持两者。事实上，我认为没有任何版本支持两者。因此，不幸的是，您也必须拆分该规则。
标题中问题的答案是肯定的。您可以将多个伪元素放在一个规则中。它在这里不起作用的事实是因为某些选择器无法识别，而不是因为它们是伪元素！
@BoltClock 这很奇怪。虽然我的小提琴按书面方式工作，但“伪类”语法确实不起作用。换句话说，Firefox 将:-moz-placeholder 识别为不是一个错误，但它不会对它做任何事情。只有新的:: 语法。哦，好吧。
嗯，所以它只是默默地忽略:，同时继续在同一规则中应用::。那很有意思。但是，我不确定在更改之前使用 : 的旧版本是否可以这样说。