一次使用多个供应商特定的CSS选择器 [英] Using multiple vendor-specific CSS selectors at once

问题描述

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

I'm styling placeholder text, and need to use several vendor-prefixed selectors so that it works in different browsers. When I put each of them as a separate code block, it works. However, if I use a comma-separated list of selectors instead of repeating the same CSS for each of them, it won't work. Can anyone explain?

这有效:

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" />

为什么?

推荐答案

不幸的是，你不能.

当找到浏览器可以识别为有效的选择器时，它将停止执行紧随其后的代码块.

Unfortunately, you can't.

When a selector that the browser does recognise as valid is found, it stops execution of the code block following it.

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

Only one of the vendor-prefixed selectors you are using will exist in each browsers (for example WebKit browsers do not have the Mozilla and Microsoft vendor-prefixed selectors); therefore you will never be able to execute that block as there is no browser where all three pseudo-selectors are valid.

...您可以简单地使用三个不同的块.例如，这应该起作用:

... you can simply use three different blocks. For example, this should work:

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之类的预处理器将相同的代码动态地放入每个块中.

If you have a lot of code, you could use a preprocessor like LESS or SASS to dynamically put the same code inside each block.

这篇关于一次使用多个供应商特定的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！