为什么不能将特定于供应商的伪元素/类组合到一个规则集中?


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

有人能阐明为什么会这样吗?

Answers:


75

CSS2.1指出

选择器(也见部分选择)包括了一切的(但不包括)第一个左花括号({)。选择器始终与声明块一起使用。当用户代理无法解析选择器时(即,它不是有效的CSS 2.1),它必须忽略选择器以及随后的声明块(如果有)。

请注意,由于CSS2.1早于CSS3,因此在假定用户代理完全符合CSS2.1且理论上不存在CSS3的前提下编写“它不是有效的CSS 2.1”。在实践中,无论规范说“它不是有效的CSS”还是类似的含义,都应理解为“用户代理不理解”。有关更深入的解释,请参阅我对相关问题的回答。

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

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


1 请注意,WebKit因部分违反该规则而臭名昭著:解析规则的选择器具有无法识别的前缀伪元素(在本例中为::-moz-placeholder)的规则没有问题。也就是说,:-moz-placeholder您的组合规则中的伪类将导致它无论如何都被破坏。


非常感谢,非常有意义。还是蛮令人沮丧的!仅供您将来参考::-moz-placeholder伪类仅在最近才随着FireFox 19的引入而贬值,因此遗憾的是两者兼而有之,目前必须使用:-moz-placeholder双冒号后继者::-moz-placeholder以确保最佳的浏览器覆盖率。
johnkavanagh 2013年

14

规范说,如果用户代理无法识别选择器的一部分,则必须忽略整个选择器及其块。

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

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


这里的链接对我不起作用(没有导致引用的文本);我找到了这个:< w3.org/TR/selectors/#Conformance >。IMO,解析选择器列表(如)应该没有问题input:-moz-placeholder,:-any-other-bogus-selector,因此规则应该起作用,并且放下它的浏览器会违反规则。
Tobias
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.