Is it possible to write one CSS rule for several prefixed selectors?

问题

See answer for this question. I write CSS rule:

::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder {
    color:    #999;
}

So firefox can not recognize its elements (-moz-placeholder and -moz-placeholder). Why? It is possible to write all this pseudo element in one CSS rule?

回答1:

Short answer: no. This behaviour is accordance with the W3C spec (see 4.1). That is if any selector list contains one or more selectors that are invalid, the entire selector list is considered invalid, hence you cannot group browser-specific selectors.

Warning: the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire selector list would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated.

回答2:

According to Firefox, the selector has errors; unrecognised pseudo classes. So the rule is ignored in its entirety, as per the definition.

Ditto for webkit and IE.

So the solution is to split these across multiple rules, as the answer to the other question indicates.

::-webkit-input-placeholder {
    color:    #999;
}
:-moz-placeholder,::-moz-placeholder {
    color:    #999;
}
:-ms-input-placeholder {
    color:    #999;
}

As you can see, you can put both the -moz- ones in the same rule, because Firefox recognises them both. (They also mean the same thing, so having them both in the rule is redundant, but it works, so it doesn't matter.)

Fiddle

Edit: as shown in the comments, the single-colon version of the Mozilla selectors doesn't work, only the double colon version does. (in the latest version that is, don't have older versions here). But the single-colon version is not considered an error, otherwise this CSS wouldn't have worked.

来源：https://stackoverflow.com/questions/17672698/is-it-possible-to-write-one-css-rule-for-several-prefixed-selectors

标签

css

css-selectors

pseudo-element