How does ::selection's specificity work against type selectors?
Some questions about using CSS to specify the color of selected text:
Imagine that a rule like the following exists in the default CSS that's implemented by the browser:
::selection { background-color: Highlight; color: HighlightText; }
Further imagine that a rule like the following is defined in any site-specific authored stylesheet:
body { background-color: white }
Given these rules, what would the
background-colorof the selected body text be? Would it bewhite, orHighlight?Perhaps the rule in the author stylesheet should override the default rule: because according to specificity,
bodyis just as specific as::selectionand is specified later (and should therefore override the previous entry).On the other hand, that would result in text being invisible when it's selected (because if
Highlightis blue andHighlightTextis white so that 开发者_如何学Cselected text is white-on-blue, then overriding thebackground-colorof selected text so that it's white would result in its being white-on-white).Assuming that the behaviour in step 2 is undesirable, how to avoid it?
Say that it's a bug in the user stylesheet, which shouldn't ever specify
background-colorwithout also specifyingcolor?Say that
bodyisn't a match for selected body text except when the::selectionpseudo-element is specified as part of the selector?
Type selectors (e.g. body) and pseudo-element selectors (e.g. ::selection) do indeed have the same specificity, but specificity only comes into play when two selectors select the same element.
The body selector doesn’t select selected text, or any text at all — it selects the <body> element. It’s the element, and not its text, that has the background-color.
Whereas ::selection selects an imaginary element that surrounds currently selected text on the page. So there’s no conflict between styles set on body and ::selection, because the selectors select different things.
Example
Imagine you had the following HTML:
<body>
I am some body text.
<p>I am some text in a paragraph.</p>
</body>
And the following CSS:
p {
background-color: red;
}
body {
background-color: white;
}
Both selectors have the same specificity, but the <p>’s background will still be red, because it’s not the <body> element.
The same is true if you replace p with ::selection — selected text’s background will be red, because text within the <body> element is not the <body> element.
So, basically, what you said here:
bodyisn't a match for selected body text except when the::selectionpseudo-element is specified as part of the selector
The following style:
body { background-color: white }
applies to background color of your page.
On the other hand, this rule:
::selection { background-color: Highlight; color: HighlightText; }
applies styles when you select text on your page.
So they do completely different things and there is no question of collision between them.
Why was it removed?
Well that would be a question you would have to ask of the W3C committee that removed it from the draft. My understanding is there has been a lot of internal turmoil within the W3C community since they began writing the HTML5 and CSS3 drafts. Certain individuals that run projects developing the browsers (and I wont go into names) wanted it done one way, and developers be damned. The developer community wanted it done another way, and so began feud over who should control the W3C.
Given these rules, what would the background color of selected body text be: would it be white, or Highlight?
Sarfraz hit it on the head here, the :selection pseudo-class will only effect selected text. So in your example when you highlight something the background color changes to Highlight, when it is unselected it returns to white.
I haven't tested this particular example but here is what I understand of it
::selection will override the background color once the selection is made, and will bring it back to the body{background-color: white;} once the text is deselected.
we just have to make sure to always give a proper color and background values to both the selection and the main style.
加载中,请稍侯......
精彩评论