为什么从CSS Selectors规范中删除了:: selection,它的特异性如何对类型选择器起作用?

Chr*_*isW 11 css w3c css-selectors css3 pseudo-element

有关使用CSS指定所选文本颜色的一些问题:

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

    ::selection是为CSS3选择器起草的,但是从当前的CSS3草案中删除了.无论如何,它在浏览器中实现并且支持将继续.

    为什么删除它?

  2. 想象一下,浏览器实现的默认CSS中存在以下规则:

    ::selection { background-color: Highlight; color: HighlightText; }
    
    Run Code Online (Sandbox Code Playgroud)

    进一步想象在任何特定于站点的创作样式表中定义如下规则:

    body { background-color: white }
    
    Run Code Online (Sandbox Code Playgroud)

    根据这些规则,所选正文的背景颜色是:它会是white,还是Highlight

    也许作者样式表中的规则应该覆盖默认规则:因为根据特异性,body::selection与后面指定的具体相同(因此应该覆盖前一个条目).

    另一方面,这会导致文本在被选中时不可见(因为如果Highlight是蓝色并且HighlightText是白色的,那么所选文本是白色的蓝色,然后覆盖background-color所选文本,使其为白色将导致其为白色-on白色).

  3. 假设步骤2中的行为是不合需要的,如何避免它?

    • 假设它是用户样式表中的一个错误,如果没有指定,background-color则不应该指定color

    • 假设这body与选定的正文文本不匹配,除非将::selection伪元素指定为选择器的一部分?

Pau*_*ite 7

类型选择器(例如body)和伪元素选择器(例如::selection)确实具有相同的特异性,但是当两个选择器选择相同的元素时,特异性才起作用.

body选择器不选择所选文本,或任何文本在所有-它选择<body>元件.它是具有背景颜色的元素,而不是其文本.

::selection选择围绕页面上当前所选文本的虚构元素.因此,有风格的设置之间没有冲突body::selected,因为选择选择不同的东西.

想象一下,你有以下HTML:

<body>
    I am some body text.

    <p>I am some text in a paragraph.</p>
</body>
Run Code Online (Sandbox Code Playgroud)

以下CSS:

p {
    background-color: red;
}

body {
    background-color: white;
}
Run Code Online (Sandbox Code Playgroud)

两个选择器具有相同的特异性,但是它<p>的背景仍然是红色的,因为它不是<body>元素.

如果替换为p,则同样如此::selection- 所选文本的背景将为红色,因为<body>元素中的文本不是<body>元素.

所以,基本上,你在这里说的话:

body除非将::selection伪元素指定为选择器的一部分,否则不与所选正文文本匹配

  • @TylerH:我认为在过去的十年中,在::选择方面已经做了足够的工作,这个问题及其所有答案都是没有意义的——考虑到问题的性质,也许可以应用历史锁定。 (2认同)