:: selection中剩下的蓝色？

Question

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

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

====== EDIT ==

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

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

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

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

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

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

---

同时，还有这个页面：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而不是十六进制代码。我觉得它没有任何区别 - 它基本上是相同的代码。

现在是什么让我想知道。

为什么在第一页上默认的蓝色选择仍然存在，但它不会在第二页上保留？而且，如何使它像第二页一样完美？

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：

  

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

Answer 2

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

Answer 3

前段时间我读了这个问题，为同样的问题找到了解决办法，但我没有找到。现在，即使问题陈旧，我想分享我找到的解决方案。

只需使用通用选择器：

*::selection { background:red; }