11

CSSを使用して選択したテキストの色を指定することに関するいくつかの質問：

ブラウザによって実装されるデフォルトのCSSに次のようなルールが存在するとします。

::selection { background-color: Highlight; color: HighlightText; }

さらに、次のようなルールがサイト固有の作成されたスタイルシートで定義されていると想像してください。

body { background-color: white }

  1. これらのルールを考えるとbackground-color、選択した本文のテキストはどうなりますか？それでしょうかwhite、それともHighlight？

    おそらく、作成者スタイルシートのルールはデフォルトのルールをオーバーライドする必要があります。これは、特異性に応じて、後で指定されるのとbody同じように特異的::selectionであるためです（したがって、前のエントリをオーバーライドする必要があります）。

    一方、それは選択されたときにテキストが見えなくなる結果になります（選択されたテキストが白地に白になるようにHighlight青とHighlightText白の場合、選択されたテキストを白に上書きするbackground-colorと白になるため） -オンホワイト）。

  2. ステップ2の動作が望ましくないと仮定して、それを回避するにはどうすればよいですか？

  • これはユーザースタイルシートのバグだと言ってください。これは、指定background-colorせずに指定するべきではありませんcolorか？

  • 疑似要素がセレクターの一部として指定されているbody場合を除いて、選択した本文テキストと一致しないと言いますか？::selection

4

4 に答える 4

7

タイプセレクター（eg body）と疑似要素セレクター（eg ::selection）は確かに同じ特異性を持っていますが、特異性は2つのセレクターが同じ要素を選択した場合にのみ機能します。

セレクターは、body選択したテキストやテキストをまったく選択しません<body>。要素を選択します。背景色を持つのは要素であり、テキストではありません。

一方::selection、ページ上で現在選択されているテキストを囲む架空の要素を選択します。したがって、セレクターが異なるものを選択するため、に設定さbodyれたスタイルととの間に競合はありません。::selection

例

次のHTMLがあるとします。

<body>
    I am some body text.

    <p>I am some text in a paragraph.</p>
</body>

そして次のCSS：

p {
    background-color: red;
}

body {
    background-color: white;
}

両方のセレクターの特異性は同じですが、要素<p>ではないため、の背景は引き続き赤になります。<body>

に置き換える場合も同様です。要素内のテキストは要素ではないためp、::selection選択したテキストの背景は赤になります。<body><body>

だから、基本的に、あなたがここで言ったこと：

body::selection疑似要素がセレクターの一部として指定されている場合を除いて、選択した本文テキストと一致しません

于 2010-12-21T14:20:57.253 に答える
3

次のスタイル：

body { background-color: white }

ページの背景色に適用されます。

一方、このルールは次のとおりです。

::selection { background-color: Highlight; color: HighlightText; }

ページ上のテキストを選択するときにスタイルを適用します。

したがって、それらは完全に異なることを行い、それらの間の衝突の問題はありません。

于 2010-12-21T13:53:47.080 に答える
2

なぜ削除されたのですか？

それは、ドラフトから削除したW3C委員会に尋ねなければならない質問です。私の理解では、W3CコミュニティはHTML5およびCSS3ドラフトを書き始めて以来、多くの内部混乱がありました。ブラウザを開発するプロジェクトを実行している特定の個人（そして私は名前には入りません）は、それが一方向に行われることを望んでおり、開発者はひどい目に遭っています。開発者コミュニティはそれが別の方法で行われることを望んでいたので、誰がW3Cを制御すべきかについての確執を始めました。

これらのルールを考えると、選択した本文の背景色は次のようになります。白ですか、それともハイライトですか。

Sarfrazはここで頭を叩きました。：selection疑似クラスは選択されたテキストにのみ影響します。したがって、この例では、何かをハイライトすると背景色がハイライトに変わり、選択を解除すると白に戻ります。

私はこの特定の例をテストしていませんが、これが私が理解していることです

于 2010-12-21T14:00:01.357 に答える
0

::selectionbody{background-color: white;}選択が行われると背景色を上書きし、テキストの選択が解除されると背景色に戻ります。
選択範囲とメインスタイルの両方に常に適切な色と背景値を指定する必要があります。

于 2014-07-25T03:28:26.963 に答える