一次选择特定的CSS选择器
我正在设置占位符文本样式，并且需要使用多个供应商前缀选择器，以便它可以在不同的浏览器中使用。 当我把它们分别作为一个单独的代码块时，它就可以工作。 但是，如果我使用逗号分隔的选择器列表而不是为每个选择器重复相同的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" />不幸的是，你不能。
当浏览器识别为有效的选择器被找到时，它停止执行跟随它的代码块。
每个浏览器中只有一个供应商前缀选择器存在（例如，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!">您无法对这些选择器进行分组的原因是，只要浏览器遇到未知选择器，就会停止执行该代码块。
供应商特定的选择器只有支持它们的浏览器才知道。 如果对它们进行分组，则每个浏览器都将停止在该组中的第一个选择器或第二个选择器上执行该代码块。
在这个例子中：
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浏览器中有效。 其他浏览器将在第一个选择器处停止执行。
因此，每个选择器都必须有自己的代码块。
链接地址: http://www.djcxy.com/p/70515.html