一次使用多个特定于供应商的 CSS 选择器

Question

我正在设置占位符文本的样式，需要使用多个供应商前缀的选择器，以便它在不同的浏览器中工作。 当我将它们中的每一个作为单独的代码块时，它可以工作。 但是，如果我使用逗号分隔的选择器列表而不是为每个选择器重复相同的 CSS，它将不起作用。 谁能解释一下？

这有效：

input[type=text]::-webkit-input-placeholder {
color: green;
}
input[type=text]::-moz-placeholder {
color: green;
}
input[type=text]:-ms-input-placeholder {
color: green;
}
input[type=text]:-moz-placeholder {
color: green;
}

<input type="text" placeholder="Placeholder Text" />

但这不会：

input[type=text]::-webkit-input-placeholder,
input[type=text]::-moz-placeholder,
input[type=text]:-ms-input-placeholder, 
input[type=text]:-moz-placeholder {
	    color: green;
}

<input type="text" placeholder="Placeholder Text" />

为什么？

Answer 1

不幸的是，你不能。

当找到浏览器识别为有效的选择器时，它会停止执行其后的代码块。

每个浏览器中只存在一个你使用的供应商前缀的选择器(例如，WebKit浏览器没有Mozilla和Microsoft供应商前缀的选择器);因此你永远无法执行该块，因为没有浏览器的所有三个伪选择器都有效。

然而。。。

。您可以简单地使用三个不同的块。例如，这应该有效：

input[type=text]:focus::-webkit-input-placeholder {
color: green;
}
input[type=text]:focus::-ms-input-placeholder {
color: green;
}
input[type=text]:focus::-moz-placeholder {
color: green;
}

<input type="text" placeholder="Hello, world!">

如果你有很多代码，你可以使用像LESS或SASS这样的预处理器将相同的代码动态地放在每个块中。

Answer 2

您无法对这些选择器进行分组的原因是，一旦浏览器遇到未知的选择器，它就会停止执行该代码块。

特定于供应商的选择器仅由支持它们的浏览器知道。 如果将它们分组，则每个浏览器将在组中的第一个选择器或第二个选择器停止执行该代码块。

在此示例中：

input[type=text]::-webkit-input-placeholder,  /* Chrome / Opera / Safari */
input[type=text]::-moz-placeholder,           /* Firefox 19+ */
input[type=text]:-ms-input-placeholder,       /* Edge/IE 10+ */
input[type=text]:-moz-placeholder {           /* Firefox 18- */
color: green;
}

Google Chrome、Safari 和 Opera 将识别第一个选择器，但它们将在第二个选择器上停止执行此代码块，该选择器仅在 Firefox 浏览器中有效。 其他浏览器将在第一个选择器时停止执行。

因此，这些选择器中的每一个都必须有自己的代码块。