分组占位符颜色样式

Question

为什么会这样：

input { color: #807E82; }
input:-moz-placeholder { color: #807E82; }
input::-moz-placeholder { color: #807E82; }
input:-ms-input-placeholder { color: #807E82; }
input::-webkit-input-placeholder { color: #807E82; }

但这不是：

input,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder { color: #807E82; }

如果我想快速更改所有输入颜色和占位符颜色，似乎有点痛苦。

Answer 1

那是因为CSS error handling works：如果选择器中的单个规则无效（用户代理无法识别），整个选择器及其规则将被用户代理丢弃。

在第二个例子中，每个浏览器都有自己的难以接收的选择器部分（Firefox赢得了关于-ms-input...，Chrome和IE的任何信息 - 关于-moz-...等等。因此，整个规则将被忽略。