CSS问题：组合选择器时placeholder样式无法生效

问题的核心在于CSS的选择器容错机制：浏览器碰到自己无法识别的选择器时，会直接忽略整个包含该选择器的规则块——哪怕规则里还有它能识别的选择器。

• 第一种写法只包含Chrome支持的::-webkit-input-placeholder选择器，所以Chrome能正常解析这个规则，让placeholder变成红色。
• 第二种写法把多个浏览器前缀的选择器放在同一个规则里，Chrome不认识::-moz-placeholder（火狐专用）和::-ms-placeholder（IE/Edge旧版专用），于是整个规则被Chrome直接丢弃，自然看不到红色的placeholder。

要解决这个问题，必须把不同浏览器的前缀选择器拆分成独立的规则块，这样每个规则只包含对应浏览器能识别的选择器，不会互相干扰：

.amsearch-input::-webkit-input-placeholder {
    color: red;
}
.amsearch-input::-moz-placeholder {
    color: red;
}
.amsearch-input::-ms-placeholder {
    color: red;
}
.amsearch-input::placeholder {
    color: red;
}

这样不管是Chrome、火狐还是其他浏览器，都能解析对应自己的规则，实现跨浏览器的placeholder样式。

内容的提问来源于stack exchange，提问作者Black