为什么::选择从CSS选择器规范中删除,它的特性如何对类型选择器工作? [英] Why was ::selection removed from the CSS Selectors spec, and how does its specificity work against type selectors?

查看:129
本文介绍了为什么::选择从CSS选择器规范中删除,它的特性如何对类型选择器工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有关使用CSS指定所选文字的颜色的一些问题:


  1. https://developer.mozilla.org/En/CSS/::selection 说,

    $已为 CSS3
    选择器
    草拟
    $ b


    :: selection
    当前CSS3草案中删除。


    为什么会被移除?


  2. 假设在浏览器实施的默认CSS中存在如下规则:

      :: selection {background-color:Highlight;颜色:HighlightText; }进一步想象在任何特定于站点的创作样式表中定义了如下所示的规则:

    p>

      body {background-color:white} 

    根据这些规则,所选主体文本的背景颜色是:白色还是突出显示



    也许作者样式表中的规则应该覆盖默认规则: c $ c> body :: selection 一样具体,后面指定(因此应覆盖上一个条目)。



    另一方面,这将导致文本在选中时不可见(因为如果突出显示是蓝色的, $ c> HighlightText 是白色的,因此所选文本是蓝色白色,然后覆盖所选文本的 background-color ,使其为白色


  3. 假设步骤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:

  1. 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?

  2. 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, 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).

  3. 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?

解决方案

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆