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

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

https://developer.mozilla.org/En/CSS/::selection 说，

::selection 起草了 CSS3 选择 但是从中删除了目前的CSS3草案。无论如何，它是在浏览器和支持中实现将继续。

为什么删除它？
想象一下，浏览器实现的默认CSS中存在以下规则：
```
::selection { background-color: Highlight; color: HighlightText; }
```
进一步想象在任何特定于站点的创作样式表中定义如下规则：
```
body { background-color: white }
```
根据这些规则，所选正文的背景颜色是什么：是不是 white，要么 Highlight？

也许作者样式表中的规则应该覆盖默认规则：因为根据特殊性， body 和...一样具体 ::selection 并且稍后指定（因此应该覆盖前一个条目）。

另一方面，这会导致文本在被选中时不可见（因为如果 Highlight 是蓝色的 HighlightText 是白色的，所以选定的文字是蓝白色，然后覆盖 background-color 选定的文本，以便它是白色将导致它是白色的白色）。
假设步骤2中的行为是不合需要的，如何避免它？
- 假设它是用户样式表中的一个错误，它不应该指定 background-color 没有指定 color？
- 比如说 body 不适用于选定的正文文本，除非是 ::selection 伪元素被指定为选择器的一部分？

1316

2017-12-21 13:48

起源

它看起来像你问题的第一部分（“它为什么被丢弃？”）应该作为一个单独的问题存在，因为无论如何接受的答案都没有解决。你现在可以把它作为一个新问题，因为它已被证实已被删除，并且有理由这样做。 - BoltClock♦

答案:

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

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

而 ::selection 选择围绕页面上当前所选文本的虚构元素。所以设置的样式之间没有冲突 body 和 ::selected，因为选择器选择不同的东西。

例

想象一下，你有以下HTML：

<body>
    I am some body text.

    <p>I am some text in a paragraph.</p>
</body>

以下CSS：

p {
    background-color: red;
}

body {
    background-color: white;
}

两种选择器具有相同的特异性，但是 <p>的背景仍然是红色的，因为它不是 <body> 元件。

如果你更换也是如此 p 同 ::selection - 所选文本的背景将为红色，因为文本内 <body> 元素不是 <body> 元件。

所以，基本上，你在这里说：

body 不适用于选定的正文文本，除非是 ::selection 伪元素被指定为选择器的一部分

2017-12-21 14:20

好吧，我认为你说处理就好像DOM看起来像这样： <body>Some <::selection>selected</::selection> text.</body> 因为背景颜色值与 ::selection 伪元素因此文本没有得到它的风格 <body> 现在是文本的祖父节点，而不是其父节点。 - ChrisW

@ChrisW：答对了。我对你的陈述所做的唯一微小的修正是，严格来说，文字永远不会得到 background-color 样式。想象一下，每个DOM元素都会围绕其内容创建一个框。它是获取背景颜色的盒子，而不是文本本身。而像是一个属性 color，文本是获得风格的众多事物之一。（盒子上的任何边框或轮廓也都有样式。） - Paul D. Waite

当前（截至2012年1月） CSS3 UI的Last Call草案现在简单地说，“:: selection pseudo-element伪装元素已被删除，因为它在测试发现互操作性问题后会从选择器中删除，以及探索/定义的更多细节。”其中一个主要问题是将样式传播到后代元素，这是深入的在这个邮件列表线程中。（我应该将此作为答案发布，因为它解决了OP的第一个问题吗？） - BoltClock♦

基本上，这意味着 ::selection 已经从CSS3中消失了。但是，它并没有被遗忘;工作组只需要对这些细节进行排序（我热切地关注讨论），谁知道 - 他们可能会在未来几年将其归结为CSS4用户界面。 - BoltClock♦

我还在一开始就修改了我们讨厌的评论，以避免减损手头的讨论。 - BoltClock♦

以下风格：

body { background-color: white }

适用于您网页的背景颜色。

另一方面，这个规则：

::selection { background-color: Highlight; color: HighlightText; }

当你使用样式选择您网页上的文字。

所以他们做了完全不同的事情，他们之间没有碰撞的问题。

2017-12-21 13:53

你是说那个 body 规则适用于正文中的文本，但不适用于正文中的选定文本？ - ChrisW

如果是这样，那么选择器的行为与其他伪元素的行为不匹配：例如 a 无论锚是否已被访问，选择器都适用于每个锚。 - ChrisW

或者如果作者指定的话 body 规则确实适用于所有文本，包括选定的文本，然后它不会覆盖 ::selection 先前隐含指定的规则？如果不是那么为什么不呢？ - ChrisW

是的，你得到了正确的身体规则不适用于选择。 - Sarfraz

你的倒退。 psuedo-classes仅在活动时覆盖样式。因此，文本将在选中时突出显示，并在不显示时返回白色。 - PseudoNinja

为什么删除它？

那么这将是一个问题，你不得不问W3C委员会将其从草案中删除。我的理解是，自从他们开始编写HTML5和CSS3草案以来，W3C社区内部出现了很多内部动荡。某些运行开发浏览器的项目的人（我不会进入名称）希望它以一种方式完成，并且开发人员会被诅咒。开发者社区希望以另一种方式完成，因此开始争论谁应该控制W3C。

根据这些规则，所选正文的背景颜色是什么：它是白色还是高光？

Sarfraz在这里击中头部，：选择伪类只会影响选定的文本。因此，在您的示例中，当您突出显示某些内容时，背景颜色将更改为“突出显示”，当未选中时，它将返回白色。

我没有测试过这个特殊的例子，但这是我对它的理解

2017-12-21 14:00

我明白那个 ::selected 仅适用于选定的文本。我的问题是，是否 body 也适用于选定的文本，以及是否覆盖 ::selected 规则（如果不是，那么为什么不）。 - ChrisW

正文适用于一切。：当活动时，selected会覆盖body的值，body不会覆盖以下值：selected。 - PseudoNinja

“身体不会覆盖：选择的价值” - 为什么不呢？它似乎具有相同的特异性，并在以后被强化？级联顺序的算法说，“如果两个声明具有相同的权重，起源和特异性，后者指定胜利”。 - ChrisW

区别在于body是一个元素，而：selected是一个伪类。如果我们讨论两个要素，你的定义是正确的。 - PseudoNinja

::selection 是一个伪元素。 - BoltClock♦

::selection 选择完成后将覆盖背景颜色，并将其带回 body{background-color: white;} 取消选择文本后。
我们必须确保始终为选择和主要样式提供正确的颜色和背景值。

2017-07-25 03:28

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

答案:

例

热门问题

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