Why can I not group browser-specific CSS-selectors for different browsers?

问题

I just tried to write the following rule to style the input placeholder for browsers that support it:

#main input::-webkit-input-placeholder,
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

The problem is that the rule isn't applied. However, if I break it up like this instead it works just fine:

#main input::-webkit-input-placeholder
{
    color: #888;
    font-style: italic;
}
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

Why can I not group browser-specific selectors, or is there another way to do it? It doesn't feel right to repeat the same attributes twice for the same element.

Update:

Just found this resource stating that it cannot be done, but so far no information on why. It seems odd that the browser should have to discard the entire rule just because it doesn't recognize one of the selectors.

回答1:

If one selector in a group of selectors is invalid, the browser must treat the entire rule as invalid. Or at least so says the W3C.

I'm not sure why this behaviour is mandated, but at a push, I'd guess it's because an invalid selector could break general CSS syntax, making it impossible for a browser to reliably guess where the invalid selector ends and valid elements begin.

回答2:

Most likely, some browsers discard the entire definition because they don't consider the selector valid.

回答3:

If you are willing to use JavaScript, check out the -prefix-free script. It allows you to leave off the vendor specific prefixes (e.g. -webkit- or -moz-) for CSS properties like these.

来源：https://stackoverflow.com/questions/10728360/why-can-i-not-group-browser-specific-css-selectors-for-different-browsers