Chr*_*isW 11 css w3c css-selectors css3 pseudo-element
有关使用CSS指定所选文本颜色的一些问题:
https://developer.mozilla.org/En/CSS/::selection说,
::selection是为CSS3选择器起草的,但是从当前的CSS3草案中删除了.无论如何,它在浏览器中实现并且支持将继续.
为什么删除它?
想象一下,浏览器实现的默认CSS中存在以下规则:
::selection { background-color: Highlight; color: HighlightText; }
Run Code Online (Sandbox Code Playgroud)
进一步想象在任何特定于站点的创作样式表中定义如下规则:
body { background-color: white }
Run Code Online (Sandbox Code Playgroud)
根据这些规则,所选正文的背景颜色是:它会是white,还是Highlight?
也许作者样式表中的规则应该覆盖默认规则:因为根据特异性,body它::selection与后面指定的具体相同(因此应该覆盖前一个条目).
另一方面,这会导致文本在被选中时不可见(因为如果Highlight是蓝色并且HighlightText是白色的,那么所选文本是白色的蓝色,然后覆盖background-color所选文本,使其为白色将导致其为白色-on白色).
假设步骤2中的行为是不合需要的,如何避免它?
假设它是用户样式表中的一个错误,如果没有指定,background-color则不应该指定color?
假设这body与选定的正文文本不匹配,除非将::selection伪元素指定为选择器的一部分?
类型选择器(例如body)和伪元素选择器(例如::selection)确实具有相同的特异性,但是当两个选择器选择相同的元素时,特异性才起作用.
该body选择器不选择所选文本,或任何文本在所有-它选择<body>元件.它是具有背景颜色的元素,而不是其文本.
而::selection选择围绕页面上当前所选文本的虚构元素.因此,有风格的设置之间没有冲突body和::selected,因为选择选择不同的东西.
想象一下,你有以下HTML:
<body>
I am some body text.
<p>I am some text in a paragraph.</p>
</body>
Run Code Online (Sandbox Code Playgroud)
以下CSS:
p {
background-color: red;
}
body {
background-color: white;
}
Run Code Online (Sandbox Code Playgroud)
两个选择器具有相同的特异性,但是它<p>的背景仍然是红色的,因为它不是<body>元素.
如果替换为p,则同样如此::selection- 所选文本的背景将为红色,因为<body>元素中的文本不是<body>元素.
所以,基本上,你在这里说的话:
body除非将::selection伪元素指定为选择器的一部分,否则不与所选正文文本匹配
| 归档时间: |
|
| 查看次数: |
1096 次 |
| 最近记录: |