一次使用多个特定于供应商的 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 浏览器中有效。其他浏览器将在第一个选择器处停止执行。

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