css - 一次使用多个特定于供应商的 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 供应商前缀选择器)；因此，您将永远无法执行该 block ，因为没有所有三个伪选择器都有效的浏览器。

然而...

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

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 等预处理器动态地将相同的代码放入每个 block 中。