一次使用多个特定于供应商的 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会识别第一个选择器，但是会在第二个选择器处停止执行这段代码，只在火狐浏览器。其他浏览器将在第一个选择器处停止执行。

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

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

Using multiple vendor-specific CSS selectors at once

css

cross-browser

vendor-prefix

很遗憾，你不能。

然而...