使用 body::selection，我想自定义高亮颜色

Posted 2023-03-06

【中文标题】使用 body::selection，我想自定义高亮颜色

【英文标题】：Use body::selection, i want to customize highlight color

【发布时间】：2012-02-21 04:40:22

【问题描述】：

为什么不能使用body::selection，当我想要任何可以突出显示为我想要的颜色时，任何东西都包括 p img li h1

这里的例子 现在我希望所有突出显示为红色，但我使用的是body::selection，它永远不会工作

http://jsfiddle.net/kent93/nu6ju/

【问题讨论】：

你的问题是什么？这个例子就像一个魅力：body::selection background-color: red; 完全按照它应该做的事情。

我的问题是为什么它会将 img p li h1 高亮颜色也变成红色？

因为一切都嵌套在 body 标签内

【参考方案1】：

如果要将选择背景应用于所有元素，请省略类型选择器：

::selection 
    background: red;

就此而言，添加 ::-moz-selection 以便它也可以在 Firefox 中使用：

::-moz-selection 
    background: red;

::selection 
    background: red;

---

从未决定您为E::selection 为任何元素E 设置的样式应该如何传播到E 的后代。有更深入的讨论in the www-style mailing list。也是因为这个原因，::selection 在 CSS3 UI 的最新 LC 修订版中完全从 CSS3 中删除；见this section，上面写着：

::selection 伪元素已被删除，因为它在测试发现互操作性问题和进一步探索/定义的细节后从选择器中删除。

我最好的猜测是浏览器（至少是 Firefox）只是不会将相同的规则应用于后代元素。所以如果你将伪元素应用到body，那么只有body的文字会有自定义的选择背景；嵌套在其中的所有内容都没有选择背景。

【讨论】：

也许你是对的，因为我尝试了很多方法，但没有人让我感到快乐

【参考方案2】：

如果要停止级联，可以添加

body *::selection background: inherit;

所以只有顶层的文本会被选择为红色。示例：http://jsfiddle.net/nu6ju/4/