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

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各国:选择器(另见选择器)包括(但不包括)第一个左旋大括号({)。选择器总是与声明块一起使用。当用户代理无法解析选择器(即它不是有效的CSS 2.1)时，它必须视而不见选择器和下面的声明块(如果有的话)。请注意，由于CSS2.1提前日期为CSS 3，“它是无效的CSS2.1”是在假设用户代理完全符合CSS 2.1并且理论上不存在CSS 3的前提下编写的。在实践中，无论规范中提到“它不是有效的CSS”或类似的内容，都应该被理解为“用户代理不理解它”。见我对这个相关问题更深入的解释。也就是说，由于一个供应商的浏览器不理解其他供应商的前缀，所以它必须删除在伪类和伪元素选择器中包含这些未识别前缀的任何规则。1想了解一下为什么这样的规则已经出台，见这个答案.1 请注意，webkit因部分藐视此规则而臭名昭著：它不需要解析那些选择器具有不可识别的前缀伪元素的规则(在本例中是这样)。::-moz-placeholder)。也就是说，:-moz-placeholder合并规则中的伪类将导致其破坏。