将样式属性分配给多个 classes 的伪 class 的正确 CSS 语法？

Question

我正在尝试为 placholder 伪 class 设置 color（字体颜色）属性，用于多个 classes 输入。

（所以我希望所有带有 class .red-va 或 .blue-va 的输入都具有给定颜色的占位符文本）

我可以（并且已经）做到了：

.red-va::-webkit-input-placeholder {
   color: white;
}

.red-va:-moz-placeholder { /* Firefox 18- */
   color: white;
}

.red-va::-moz-placeholder {  /* Firefox 19+ */
    color: white;
}

.red-va:-ms-input-placeholder {  
    color: white; 
}

.blue-va::-webkit-input-placeholder {
   color: white;
}

.blue-va:-moz-placeholder { /* Firefox 18- */
   color: white;
}

.blue-va::-moz-placeholder {  /* Firefox 19+ */
    color: white;
}

.blue-va:-ms-input-placeholder {  
    color: white; 
}

基本上每个输入有两组 CSS class，浏览器支持需要四种不同的方法。

是否有更优雅/更流线型的方式来做到这一点？

Answer 1

不幸的是，在不使用预处理器的情况下（因为这是 CSS），您能做的最好的事情就是将 .red-va 和 .blue-va 的每组供应商前缀分组，但并非所有规则都包含在一个规则集中：

.red-va::-webkit-input-placeholder, .blue-va::-webkit-input-placeholder {
   color: white;
}

.red-va:-moz-placeholder, .blue-va:-moz-placeholder {   /* Firefox 18- */
   color: white;
}

.red-va::-moz-placeholder, .blue-va::-moz-placeholder { /* Firefox 19+ */
    color: white;
}

.red-va:-ms-input-placeholder, .blue-va:-ms-input-placeholder {
    color: white; 
}

或者，如果您有能力更改标记，则可以通过向 .red-va 和 .blue-va 添加一个通用的 class 来更进一步，这样您就不必重复选择器对于两者 — 有效地将您当前拥有的 CSS 减半。

您无法将它们全部归为一个规则集的原因已涵盖 here。简而言之，这是因为如果浏览器无法识别选择器列表的任何部分，则需要删除整个规则集，这是由供应商前缀引起的（对于 Firefox，也是由于版本早于19 不认识伪元素语法）。

值得庆幸的是，带前缀的伪造很快就会成为过去。

将样式属性分配给多个 classes 的伪 class 的正确 CSS 语法？

Proper CSS syntax for assigning style attributes to a pseudo-class for multiple classes'?

css

placeholder

css-selectors

pseudo-class