CSS - 如果选择器区域组合，则占位符样式不适用

Question

为什么这在 Chrome 中有效:

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

<input class="amsearch-input" placeholder="It works!" />

...但这不是:

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

<input class="amsearch-input" placeholder="It fails! :(" />

Answer 1

这是尝试处理包含供应商前缀的选择器时的常见错误。

这里的问题是

If there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

来源:developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions

还有一篇关于 css-tricks 的文章，您可以阅读该文章以获取有关此内容的更多背景信息 One Invalid Pseudo Selector Equals an Entire Ignored Selector

要修复它并使您的代码更具可持续性，您需要像这样分隔规则:

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