如果css是在一行中编写的，则使用css伪元素的斜体占位符不起作用

Question

我想将html输入文本框的占位符斜体。我正在尝试使用css中的伪元素来实现它。我正在观察一种奇怪的行为。当伪元素在单行中时，它不起作用，即占位符文本不为斜体，而当伪元素位于不同行中时，则起作用。

我创造了一把小提琴(http://jsfiddle.net/aniruddha/VZ43T/3)以证明问题。同一小提琴的版本2演示了工作代码

不工作：

.filterBox::-webkit-input-placeholder, .filterBox::-moz-placeholder, .filterBox::-ms-input-placeholder {
    font-style: italic;
}

工作：

.filterBox::-webkit-input-placeholder {
    font-style: italic;
}
.filterBox::-moz-placeholder {
    font-style: italic;
}
.filterBox::-ms-input-placeholder {
    font-style: italic;
}

当伪元素在同一行时，为什么它不起作用？CSS验证器(http://jigsaw.w3.org/css-validator/validator)表示这两个css对于css级别3都是有效的。

谢谢，Aniruddha

Answer 1

因为它们是特定于供应商的伪元素，所以不属于CSS规范的一部分。一个浏览器将只接受其中一个，并在其他浏览器上失败，然后使整个规则失败。将它们分开是阻止这种情况发生的唯一方法。

这就像你的规则中有无效的CSS语法——整个规则都失败了。

Answer 2

选择器（请参阅Selectors模块[SECT]）包括直到（但不包括）第一个左大括号（｛）.A的所有内容选择器总是与｛｝-块一起使用。当用户代理不能解析选择器（即，它不是有效的CSS3），它必须忽略｛｝-块。

参考此链接：为什么不是'；是否可以将特定于供应商的伪元素/类组合成一个规则集？

有关更多信息，请参阅CSS3 的规则集

伪元素分组失败的原因