8

CSS 元素选择器::selection { }应该用我们自己选择的文本和背景颜色替换默认的蓝色文本选择。

但是，情况似乎并非总是如此，因为我经常看到网站上还有剩余的蓝色。它并没有完全被我们选择的颜色所取代。

======编辑======

我想用我们自己的眼睛而不是通过屏幕截图更容易看到。

例如，请参阅此页面：bleachindonesia.com/2012/05/27/bleach-day

在该页面上，如果您尝试全选 (Ctrl+A)，您会看到文本将被灰色阻止/选中。是的，因为页面 CSS 使用::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }.

但是，正如您在下面的屏幕截图中看到的那样，它在某些部分留下了一些默认的蓝色选择。

注意这里灰色中的蓝色。

http://i.stack.imgur.com/A0aUJ.png

注意色差，同时注意未选中的部分。网站上的某些部分使用默认的蓝色 ::selection 被选中，但同时也有一些其他部分未被选中。

同时，还有这个页面：24ways.org/2005/swooshy-curly-quotes-without-images

再次尝试全选 (Ctrl+A) 页面。你可以看到所有的选择都是完美的栗色。没有默认的蓝色选择。只有部分没有被选中，但没有默认的蓝色选择。如下图所示：

完美着色

http://i.stack.imgur.com/4o6ll.png

页面CSS？::selection { background-color: rgba(179, 45, 71, .75); color: #fff; }. 与第一页的唯一区别是它使用 RGBA 而不是十六进制代码。我认为那里没有任何区别——它本质上是相同的代码。

现在是什么让我想知道。

为什么在第一页上默认的蓝色选择仍然存在，但在第二页上不存在？还有，如何让它像第二页一样完美？

4

3 回答 3

5

坦率地说，很难判断这是否是错误行为，尽管我推测它看起来非常像。::selection由于缺乏正确的定义（因此缺乏正确的实现和测试），所以我敢打赌，即使是浏览器供应商也很难找出问题所在。

值得一提的是，这条规则，来自第一个站点：

::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }

似乎非常良性，除了它不正确地组合::selection并且::-moz-selection它永远不会在 Firefox 中工作，因为它无法识别::selection并丢弃整个规则。24ways.org 也没有在 Firefox 中正确显示选择颜色，不是因为组合选择器，而是因为首先没有::-moz-selection选择器。

至于为什么 Chrome 和 Safari 在第一个站点的某些区域会留下蓝色突出显示区域，我真的不知道。但是，我认为Jared Farrish 提出了一个很好的观点：

这在 Chrome 中复制了这个问题（至少）：jsfiddle.net/RfPgt它似乎是当一个元素嵌套在另一个本身具有可选元素的元素中时。

于 2012-09-29T11:16:36.687 回答
1

我找到了造成这种情况的原因。<br>如果你的文字中有这样的<br>内容，请尝试删除它

于 2015-04-07T12:13:22.037 回答
-1

我前段时间阅读了这个问题，以找到解决同一问题的方法，但我没有找到。现在，即使问题很老，我也想分享我找到的解决方案。

只需使用通用选择器：

*::selection { background:red; }
于 2012-12-11T07:33:18.223 回答