如果 css 写在一行中，则使用 css 伪元素的斜体占位符不起作用[重复]答案

【问题标题】：Italicizing placeholder using css pseudo elements does not work if css is written in a single line [duplicate]如果 css 写在一行中，则使用 css 伪元素的斜体占位符不起作用[重复]
【发布时间】：2013-12-31 21:21:36
【问题描述】：

我想将 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 Validator (http://jigsaw.w3.org/css-validator/validator) 表示这两个 css 都对 CSS Level 3 有效。

谢谢，阿尼鲁达

【问题讨论】：

如果你向下滚动验证结果页面，你会看到它抱怨供应商扩展的伪元素，所有这些都是。

标签： html css css-selectors pseudo-element

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

参考了这个链接： Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

更多信息请参考Rules Sets of CSS3

Why Grouping of Pseudo element Fails

【讨论】：