在::选择中剩余的蓝色？ [英] The remaining blue color in ::selection?
问题描述
:: selection {} CSS元素选择器应该用我们自己选择的文本和背景颜色替换默认的蓝色文本选择。
但是，这似乎并不总是这样，因为我经常看到网站有剩余的蓝色。
====== EDIT ======
我想通过我们自己的眼睛，而不是通过截图更容易看到。
查看此页面例如：
注意颜色差异，同时注意未选择的部分。在网站上有一些部分被选择默认的蓝色::选择，但同时还有一些其他部分没有被选择。
同时，还有此页面：
页面CSS？ :: selection {background-color：rgba（179，45，71 ,.75）; color：#fff; } 。与第一页的唯一区别，它使用RGBA而不是十六进制代码。我不认为它有什么区别 - 它本质上是一样的代码。
现在让我很奇怪。
为什么第一页上的默认蓝色选择仍然存在，但它不会保留在第二页上？
坦白地说，很难判断这是否是错误的行为，虽然我会推测，它看起来非常喜欢它。 :: selection 遭受缺乏正确的定义（因此缺乏正确的实施和测试），所以我敢打赌，即使浏览器供应商有麻烦弄清楚出了什么问题。 / p>
值得一提的是，这条规则来自第一个网站：
:: 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 似乎是一个元素嵌套在另一个元素中，该元素本身具有可选择的元素。
The ::selection { } CSS element selector is supposed to replace the default blue-colored text selection with our own choice of text and background color.
However, this seems not always the case, as I often see websites which has the remaining blue color. It's not completely replaced with our owh choice of color.
======EDIT======
I guess it's easier to see by our own eyes rather than through screenshot.
See this page for example: bleachindonesia.com/2012/05/27/bleach-day
On that page, if you try to select all (Ctrl+A), you would see the text will be blocked/selected with gray color. Yes, because the page CSS employs ::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }.
However, as you can see with the screenshot below, it leaves some default, blue-colored selection on some part.
http://i.stack.imgur.com/A0aUJ.png
Notice the color difference, and at the same time, the unselected part. There are some parts on the site that gets selected with the default blue-colored ::selection, but at the same time there are also some other parts that doesn't get selected.
Meanwhile, there is also this page: 24ways.org/2005/swooshy-curly-quotes-without-images
Again, try to select all (Ctrl+A) the page. You could see all selection is perfectly maroon-colored. There is no default blue-colored selection. There is only parts that doesn't get selected, but there is no the default blue-colored selection. As pictured by the screenshot below:
http://i.stack.imgur.com/4o6ll.png
The page CSS? ::selection { background-color: rgba(179, 45, 71, .75); color: #fff; }. The only difference with the first page that it uses RGBA and not hex code. I don't think it makes any difference there--it's essentially the same code.
Now what makes me wonder.
Why is on the first page the default blue-colored select persists, but it doesn't persist on the second page? And, how to make it as perfect as the second page?
Frankly, it's very difficult to tell if this is buggy behavior, although I'd surmise that it looks very much like it. ::selection suffered from a lack of proper definition (and thus a lack of proper implementation and testing), so I bet even browser vendors have had trouble figuring out what's wrong.
Worth mentioning is that this rule, from the first site:
::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }
Seems very much benign, except it incorrectly combines ::selection and ::-moz-selection such that it will never work in Firefox, because it doesn't recognize ::selection and drops the whole rule. 24ways.org doesn't display the selection color properly in Firefox either, not because of combined selectors but because there is no ::-moz-selection selector in the first place.
As to why Chrome and Safari leave blue areas of highlight in certain areas in the first site, I really don't know. However, I think 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.
这篇关于在::选择中剩余的蓝色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
