css -::选择中剩余的蓝色？

Question

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

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

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

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

例如，请参阅此页面: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 { 背景色:rgba(179, 45, 71, .75);颜色:#fff； }。与第一页的唯一区别是它使用 RGBA 而不是十六进制代码。我认为这没有任何区别——本质上是相同的代码。

现在是什么让我想知道。

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

Answer 1

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

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

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

看起来非常良性，除了它错误地结合了 ::selection 和 ::-moz-selection 这样它就永远不会在 Firefox 中工作，因为它不识别 ::selection 和 drops the whole rule . 24ways.org 也没有在 Firefox 中正确显示选择颜色，不是因为组合选择器，而是因为首先没有 ::-moz-selection 选择器。

至于为什么Chrome和Safari会在第一个站点的某些区域留下蓝色高亮区域，我真的不知道。不过，我觉得Jared Farrish makes a good point :

This replicates the problem in Chrome (at least): jsfiddle.net/RfPgt It seems to be when an element is nested within another element which itself has selectable elements.