css - :: selectionの残りの青い色？

Question

CSS要素セレクターは、::selection { }デフォルトの青色のテキスト選択を、独自に選択したテキストと背景色に置き換えることになっています。

ただし、青色が残っているWebサイトをよく目にするため、これが常に当てはまるとは限りません。それは私たちの色の選択に完全に置き換えられていません。

======編集======

スクリーンショットよりも自分の目で見た方が簡単だと思います。

たとえば、このページを参照してください：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; }。最初のページとの唯一の違いは、16進コードではなくRGBAを使用していることです。そこには何の違いもないと思います-それは本質的に同じコードです。

今、私は何が不思議に思うのですか。

最初のページでデフォルトの青色の選択が持続するのに、2番目のページでは持続しないのはなぜですか？そして、2ページ目と同じくらい完璧にする方法は？

Answer 1

率直に言って、これがバグのある動作であるかどうかを判断するのは非常に困難ですが、非常によく似ていると思います。::selection適切な定義の欠如（したがって、適切な実装とテストの欠如）に悩まされていたので、ブラウザベンダーでさえ何が悪いのかを理解するのに苦労したに違いありません。

言及する価値があるのは、最初のサイトからのこのルールです。

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

ルール全体を認識して削除しないため、誤って結合され、Firefoxで機能しないこと::selectionを除いて、非常に良性のようです。24ways.orgは、Firefoxでも選択色を正しく表示しません。これは、セレクターが組み合わされているためではなく、そもそもセレクターがないためです。::-moz-selection::selection::-moz-selection

ChromeとSafariが最初のサイトの特定の領域に青いハイライト領域を残す理由については、私は本当に知りません。しかし、私はJared Farrishが良い点を示していると思います：

これは、Chromeの問題を（少なくとも）再現します。jsfiddle.net / RfPgt要素が、それ自体が選択可能な要素を持つ別の要素内にネストされている場合のようです。

Answer 2

私はこれを引き起こしているものを見つけました。あなたがあなたのテキストに<br>それを持っているならば、それはそうですそれを削除してみてください<br>

Answer 3

同じ問題の解決策を見つけるために少し前にこの質問を読みましたが、見つかりませんでした。さて、質問が古くても、見つけた解決策を共有したいと思います。

ユニバーサルセレクターを使用するだけです。

*::selection { background:red; }