11

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

假设浏览器实现的默认 CSS 中存在如下规则：

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

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

body { background-color: white }

  1. 鉴于这些规则，background-color选定的正文将是什么？会是white，还是Highlight？

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

    另一方面，这将导致文本在被选中时不可见（因为如果Highlight是蓝色且HighlightText为白色，则所选文本为蓝底白字，然后覆盖background-color所选文本使其为白色将导致其为白色-白色）。

  2. 假设步骤 2 中的行为是不可取的，如何避免呢？

  • 假设这是用户样式表中的一个错误，不应该在没有指定的background-color情况下指定color?

  • 假设除了伪元素被指定为选择器的一部分之外，这body不是所选正文的匹配项？::selection

4

4 回答 4

7

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

选择body器不会选择选定的文本或任何文本——它会选择<body>元素。具有背景色的是元素，而不是其文本。

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

例子

假设您有以下 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伪元素被指定为选择器的一部分

于 2010-12-21T14:20:57.253 回答
3

以下样式：

body { background-color: white }

适用于页面的背景颜色。

另一方面，这条规则：

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

当您在页面上选择文本时应用样式。

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

于 2010-12-21T13:53:47.080 回答
2

为什么被移除？

好吧，这将是您必须向将其从草案中删除的 W3C 委员会提出的问题。我的理解是，自从 W3C 社区开始编写 HTML5 和 CSS3 草案以来，他们内部就发生了很多动荡。某些运行开发浏览器的项目的人（我不会说出名字）希望以一种方式完成，而开发人员该死。开发者社区希望它以另一种方式完成，因此开始争论谁应该控制 W3C。

鉴于这些规则，所选正文的背景颜色是什么：是白色还是突出显示？

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

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

于 2010-12-21T14:00:01.357 回答
0

::selectionbody{background-color: white;}选择后将覆盖背景颜色，并在取消选择文本后将其恢复为原来的颜色。
我们只需要确保始终为选择和主要样式提供正确的颜色和背景值。

于 2014-07-25T03:28:26.963 回答