Why can't I combine ::selection and ::-moz-sel

问题:

This question already has an answer here:

• Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set? 2 answers

I'm a big fan of using ::selection and ::-moz-selection to spruce up a website a bit - I hate the default blue and white colours!

However, I find one little thing that really bugs me: I can't put ::selection and ::-moz-selection in the same CSS rule, like this:

::selection, ::-moz-selection {
    background:#8A1920;
    color:#FFFF;
}

jsFiddle link

I find this quite annoying, because it means that if I want to change my background colour (or some other selection style) I have to edit two separate rules. It also violates a policy I follow almost religiously: D.R.Y. (don't repeat yourself).

I tested this in Chrome 28, Chrome Canary 30, Firefox 22, Firefox 23, IE 9 and IE 10 and they all yield the same result. What's going wrong here?

If they must remain separate, is there any way to have them join further on? Something like:

.selected {
    background:#8A1920;
    color:#FFF;
}

::selection {
    @copy-from(.selected); /* I know this line is completely made up */
}

::-moz-selection {
    @copy-from(.selected);
}

Would be really useful.

回答1:

This is from the documentation:

Gecko is the only engine requiring the prefix. Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid pseudo-element, two separate rules must be written: ::-moz-selection, ::selection {...}. The rule would be dropped on non-Gecko browsers as ::-moz-selection is invalid on them.

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection