供应商前缀会导致 CSS 失败

Question

我正在尝试将占位符样式设置为输入。 此规则在FF和Chrome中运行良好：

.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder {
     color: tomato;
 }

但是，如果我尝试使用 MS 或 webkit 的供应商前缀让它在 Edge 中工作(我在某处读到 Edge 响应 webkit 前缀(：

.b-required-missing input[type="text"]::-ms-input-placeholder,
.b-required-missing input[type="email"]::-ms-input-placeholder,
.b-required-missing textarea::-ms-input-placeholder,
.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder{
    color: tomato;
}

这在 Firefox 中破坏了它，即使我把-moz-供应商前缀。 如何让它在所有 3 种浏览器中工作？

http://jsfiddle.net/vc8V4/516/

Answer 1

如果浏览器

的规则无效，浏览器会忽略样式。

所以-moz-在Chrome中是无效的。

而不是使用单个规则，

对每个前缀使用不同的规则：

.b-required-missing input[type="text"]::-ms-input-placeholder,
.b-required-missing input[type="email"]::-ms-input-placeholder,
.b-required-missing textarea::-ms-input-placeholder {
    color: tomato;
}
.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder{
    color: tomato;
}

这样，第一个规则将失败，然后应用第二个规则