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

Question

我正在尝试为多个输入类的 placholder 伪类设置 color（字体颜色）属性。

（所以我希望所有具有 .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，浏览器支持需要四种不同的方法。

有没有更优雅/更精简的方式来做到这一点？

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 添加一个公共类来进一步改进，这样您就不必为两者复制您的选择器 - 有效地将您当前的 CSS 减半有。

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

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