::selection 的特殊性如何对抗类型选择器? [英] How does ::selection's specificity work against type selectors?
问题描述
关于使用 CSS 指定所选文本颜色的一些问题:
想象一下，浏览器实现的默认 CSS 中存在如下规则:
::selection { background-color: Highlight;颜色:高亮文本；}进一步想象一下，在任何特定于站点的创作样式表中定义了如下规则:
body { 背景色:白色}根据这些规则，所选正文文本的
background-color是什么?是white，还是Highlight?也许作者样式表中的规则应该覆盖默认规则:因为根据特殊性，
body与::selection一样具体，并且稍后指定(并且因此应该覆盖之前的条目).另一方面，这会导致文本在被选中时不可见(因为如果
Highlight是蓝色而HighlightText是白色，那么所选文本是白色的-blue，然后覆盖所选文本的background-color使其为白色将导致其为白底白字).假设步骤 2 中的行为是不受欢迎的，如何避免?
说这是用户样式表中的一个错误，它不应该指定
background-color而不指定color?说
body与所选正文文本不匹配，除非::selection伪元素被指定为选择器的一部分?
类型选择器(例如body)和伪元素选择器(例如::selection)确实具有相同的特异性，但是特异性仅在两个选择器选择同一个元素.
body 选择器不会选择选定的文本，也不会选择任何文本——它选择了 元素.具有背景颜色的是元素，而不是其文本.
而 ::selection 选择一个假想的元素，该元素包围页面上当前选定的文本.所以在 body 和 ::selection 上设置的样式之间没有冲突，因为选择器选择了不同的东西.
示例
假设您有以下 HTML:
我是一些正文.<p>我是段落中的一些文本.</p>以及以下 CSS:
p {背景颜色:红色；}身体 {背景颜色:白色；}两个选择器都具有相同的特性，但是 的背景仍然是红色的，因为它不是 元素.>
如果将 p 替换为 ::selection 也是如此 — 所选文本的背景将为红色，因为 中的文本code> 元素不是 元素.
所以，基本上，你在这里说的是:
<块引用>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-colorof the selected body text be? Would it bewhite, orHighlight?Perhaps the rule in the author stylesheet should override the default rule: because according to specificity,
bodyis just as specific as::selectionand 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
Highlightis blue andHighlightTextis white so that selected text is white-on-blue, then overriding thebackground-colorof 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-colorwithout also specifyingcolor?Say that
bodyisn't a match for selected body text except when the::selectionpseudo-element is specified as part of the selector?
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:
bodyisn't a match for selected body text except when the::selectionpseudo-element is specified as part of the selector
这篇关于::selection 的特殊性如何对抗类型选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
