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

在CSS中，可以使用供应商特定的伪类和伪元素(以获得最佳的跨浏览器覆盖)的组合在输入中对占位符文本进行样式化。

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

然而，虽然我不可避免地想要应用相同的样式，而不考虑浏览器供应商，它似乎不可能将这些一起组合成一个逗号分隔的选择器(像你会想与任何其他的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的一些基本部分，我不明白。

任何人都能说明为什么会发生这种情况？

解决方法

CSS2.1 states：

The selector (see also the section on 07001) 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 07002 the selector and the following declaration block (if any) as well.

注意，在实现CSS3的浏览器的情况下，“it is not valid CSS 2.1”实际上意味着“用户代理不理解”。

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

有关为什么设置这样的规则的一些见解，请参见this answer。

1请注意，WebKit部分藐视这个规则是臭名昭着：它没有麻烦解析规则，其选择器具有无法识别的前缀伪元素(在这种情况下是:: – moz-placeholder)。也就是说，组合规则中的：-moz-placeholder伪类将导致它断开。

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

解决方法

相关文章