css - 减少输入占位符 CSS

Question

这是我的 CSS:

#login-box ::-webkit-input-placeholder {
    color: #666;
}

#login-box :-moz-placeholder {
    color: #666;
}

#login-box ::-moz-placeholder {
    color: #666;
}

#login-box :-ms-input-placeholder {
    color: #666;
}

我尝试按如下方式减少它:

#login-box ::-webkit-input-placeholder,
#login-box :-moz-placeholder,
#login-box ::-moz-placeholder,
#login-box :-ms-input-placeholder {
    color: #666;
}

但这打破了它。

如何减少上面的 CSS？

Answer 1

你基本上不能减少它。由于 CSS 的一个特性，你的尝试没有成功。当浏览器不理解选择器的一部分时，它会完全忽略整个规则。例如，Firefox(显然)不理解::-webkit-input-placeholder，因此它会跳过所有内容。

如果认为，让重复代码远离您的眼睛的唯一方法是使用像 LESS 这样的工具和像这样的一些 mixin:http://robandlauren.com/2012/04/10/less-mixin-for-styling-html5-placeholders/但如果您只需要使用它一次，那么抱歉，我看不出有什么方法可以在不限制浏览器支持的情况下减少该代码。