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/但如果您只需要使用一次，那么抱歉，我看不到在不限制浏览器支持的情况下减少代码的方法。