::selection 的特异性如何针对类型选择器起作用？

发布于 2024-10-08 18:55:31 字数 889 浏览 8 评论 0原文

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

想象一下，浏览器实现的默认 CSS 中存在如下所示的规则：

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

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

body { background-color: white }

< p>根据这些规则，所选正文的背景颜色会是什么？是白色，还是高亮？
也许作者样式表中的规则应该覆盖默认规则：因为根据特异性，body 与 ::selection 一样具体，并且稍后指定（并且因此应该覆盖之前的条目）。
另一方面，这会导致文本在被选择时不可见（因为如果 Highlight 为蓝色且 HighlightText 为白色，则所选文本为白色） -blue，然后覆盖所选文本的background-color，使其变为白色，从而使其成为白底白字）。
假设步骤 2 中的行为是不可取的，如何避免它？

说这是用户样式表中的一个错误，它不应该在不指定 color 的情况下指定 background-color？
假设 body 与选定的正文文本不匹配，除非将 ::selection 伪元素指定为选择器的一部分？

原文

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-color of the selected body text be? Would it be white, or Highlight?
Perhaps the rule in the author stylesheet should override the default rule: because according to specificity, body is just as specific as ::selection and 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 Highlight is blue and HighlightText is white so that selected text is white-on-blue, then overriding the background-color of 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-color without also specifying color?
Say that body isn't a match for selected body text except when the ::selection pseudo-element is specified as part of the selector?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞陪衬 2024-10-15 18:55:31

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

body 选择器不选择选定的文本，或根本不选择任何文本 - 它选择元素。具有背景颜色的是元素，而不是其文本。

而 ::selection 选择围绕页面上当前选定文本的假想元素。因此 body 和 ::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;
}

两个选择器具有相同的特异性，但

的背景仍为红色，因为它不是 <; body> 元素。

如果将 p 替换为 ::selection，情况也是如此 — 所选文本的背景将为红色，因为元素中的文本不是元素。

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

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

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:

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

回复收藏 0 原文

忘年祭陌 2024-10-15 18:55:31

以下样式：

body { background-color: white }

适用于页面的背景颜色。

另一方面，此规则：

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

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

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

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 原文

毁梦 2024-10-15 18:55:31

为什么被删除？

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