Question

我有这个HTML：

<input type="text" class="example" placeholder="Example"><br><br>
<input type="text" class="example" placeholder="Example"><br><br>
<input type="text" class="example" placeholder="Example"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>

当我使用这个CSS时，它可以工作（https://jsfiddle.net/sv1sqgq4/1/）：

.example::-webkit-input-placeholder {
    color: red;
}
.example:-moz-placeholder {
    color: red;
}
.example::-moz-placeholder {
    color: red;
}
.example:-ms-input-placeholder {
    color: red;
}

但是，当我这样做时，它不起作用（https://jsfiddle.net/sv1sqgq4/）：

.example::-webkit-input-placeholder,
.example:-moz-placeholder,
.example::-moz-placeholder,
.example:-ms-input-placeholder {
    color: red;
}

如何重构此CSS？我错过了什么吗？

Answer 1

请在此处查看原因： Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

Answer 2

tl; dr ：具有这些伪选择器的类必须是单独的。

<强>解释

以这种方式重构CSS 不可能。它与特定供应商的伪元素的工作方式有关。由于一个供应商的浏览器没有＆＃34;得到＆＃34;在其他浏览器的前缀中，它忽略了伪类/元素选择器中包含无法识别的前缀的任何规则。

From the docs:

4.1.7规则集，声明块和选择器

当用户代理无法解析选择器时（即，它不是有效的CSS   2.1），它必须忽略选择器和以下声明块（如果有的话）。 CSS 2.1为逗号（，）提供了特殊含义   选择。但是，因为不知道逗号是否可以获得   CSS的未来更新中的其他含义，整个陈述应该是   如果选择器中的任何地方出现错误，则忽略，即使是   选择器的其余部分在CSS 2.1中可能看起来合理。

如何重构输入占位符类？

2 个答案: