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.
解决方案
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.