为什么::选择从CSS选择器规范中删除,它的特性如何对类型选择器工作? [英] Why was ::selection removed from the CSS Selectors spec, and how does its specificity work against type selectors?
问题描述
有关使用CSS指定所选文字的颜色的一些问题:
-
https://developer.mozilla.org/En/CSS/::selection 说,
$已为 CSS3
选择器草拟
$ b
:: selection
从
当前CSS3草案中删除。
为什么会被移除?
- 假设在浏览器实施的默认CSS中存在如下规则:
:: selection {background-color:Highlight;颜色:HighlightText; }进一步想象在任何特定于站点的创作样式表中定义了如下所示的规则: p>
与
body {background-color:white}
根据这些规则,所选主体文本的背景颜色是:
白色
还是突出显示
?
也许作者样式表中的规则应该覆盖默认规则: c $ c> body
:: selection
一样具体,后面指定(因此应覆盖上一个条目)。
另一方面,这将导致文本在选中时不可见(因为如果
突出显示
是蓝色的, $ c> HighlightText 是白色的,因此所选文本是蓝色白色,然后覆盖所选文本的background-color
,使其为白色 -
假设步骤2中的行为是不受欢迎的,如何避免? strong>
-
说这是用户样式表中的一个错误,不应该指定
background
-
<$ c $ c> body 不匹配选定的正文文本,除非将
:: selection
伪元素指定为选择器的一部分?
-
a href =http://www.w3.org/TR/css3-selectors/#specificity =nofollow>类型选择器(例如 body
)和伪元素选择器(例如 :: selection
)确实具有相同的特异性,但特异性只有在两个选择器选择相同元素时才会发挥作用。
正文
选择器不选择所选文本或任何文本 - 它选择< body>
元素。
其中 :: selection
选择一个虚构的元素,其包围页面上当前选定的文本。所以在 body
和 :: selected
上设置的样式之间没有冲突,因为选择器选择不同的东西。
示例
假设您有以下HTML:
< body>
我是一些正文文本。
< p>我是段落中的一些文本。< / p>
< / body>
和以下CSS:
p {
background-color:red;
}
body {
background-color:white;
}
两个选择器都有相同的特异性,但 ; p>
的背景将仍然是红色的,因为它不是< body>
元素。
如果用 :: selection
替换 p
,选择的文本背景将是因为< body>
元素中的文本不是< body>
元素。
所以,基本上你在这里说的:
/ code>不匹配选定的正文文本,除非
:: selection
伪元素被指定为选择器的一部分
Some questions about using CSS to specify the color of selected text:
https://developer.mozilla.org/En/CSS/::selection says that,
::selection
was drafted for CSS3 Selectors but removed from the current CSS3 draft. Anyhow, it's implemented in browsers and support will continue.Why was it removed?
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 selected body text be: would it be
white
, orHighlight
?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 andHighlightText
is white so that selected text is white-on-blue, then overriding thebackground-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 specifyingcolor
?Say that
body
isn't a match for selected body text except when the::selection
pseudo-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 colour.
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 ::selected
, 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
这篇关于为什么::选择从CSS选择器规范中删除,它的特性如何对类型选择器工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!