发表新帖
发表新帖

Why was ::selection removed from the CSS Selectors spec, and how does its specificity work against type selectors?

前端 未结
关注
4 1560
一个人的身影
一个人的身影 2021-02-08 07:06

Some questions about using CSS to specify the color of selected text:

  1. https://developer.mozilla.org/En/CSS/::selection says that,

    :

相关标签:
4条回答
  • 温柔的废话
    2021-02-08 07:36

    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

    0 讨论(0)
  • 情书的邮戳
    2021-02-08 07:39

    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.

    0 讨论(0)
  • 旧巷少年郎
    2021-02-08 07:47

    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 colour.

    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 ::selected, 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:

    body isn't a match for selected body text except when the ::selection pseudo-element is specified as part of the selector

    0 讨论(0)
  • 北荒
    2021-02-08 07:57

    ::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.

    0 讨论(0)
 看不清?
提交回复
热议问题