76

在 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 的某些基本部分我不理解。

任何人都可以解释为什么会这样吗？

4

2 回答 2

76

CSS2.1状态：

选择器（另请参阅有关选择器的部分）由直到（但不包括）第一个左花括号 ({) 的所有内容组成。选择器总是与声明块一起使用。当用户代理无法解析选择器（即，它不是有效的 CSS 2.1）时，它也必须忽略选择器和以下声明块（如果有）。

请注意，由于 CSS2.1 早于 CSS3，“它不是有效的 CSS 2.1”是在假设用户代理完全符合 CSS2.1 并且理论上不存在 CSS3 的情况下编写的。在实践中，无论规范说“它不是有效的 CSS”或类似的东西，它都应该被理解为“用户代理不理解它”。有关更深入的解释，请参阅我对这个相关问题的回答。

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

有关为何制定此类规则的一些见解，请参阅此答案。

1 请注意，WebKit 因部分违反此规则而臭名昭著：它可以轻松解析选择器具有无法识别的前缀伪元素（在本例中为::-moz-placeholder）的规则。也就是说，:-moz-placeholder组合规则中的伪类无论如何都会导致它中断。

于 2013-06-07T11:00:23.517 回答
14

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

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

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

于 2013-06-07T10:59:26.813 回答