Webページで選択したテキストの外観をカスタマイズするには、:: Selection Pseudo-Elementを使用します。色や背景などのプロパティを備えた強(qiáng)調(diào)表示されたテキストのスタイリングを可能にします。たとえば、:: selection {background-color：＃ff9900;色：#fff; }選択したテキストを白いテキストでオレンジに変更します。 P ::選択を使用して、段落などの特定の要素をターゲットにすることもできます。ただし、ブラウザの互換性は、特に古いブラウザーやモバイルブラウザでは異なるため、プラットフォーム全體でテストし、重要なUIに依存しないようにします。微妙なスタイルを使用して、ユーザーの気を散らすことなくデザインを強(qiáng)化し、::選択は親からスタイルを継承しないことに注意してください。複雑な背景、フォントスタイルの変更、そしてより良い使いやすさのために過度に明るい色を避けてください。

選択したテキストがWebページでどのように見えるかをカスタマイズする場合、 ::selection Pseudo-Elementはあなたの頼りになるツールです。ユーザーがカーソルでそれを強(qiáng)調(diào)したときにテキストの外観を変更することができます。

基本的な構(gòu)文と使用

::selection非常に簡単です。他のセレクターと同様にCSSで定義しますが、現(xiàn)在選択されているテキストの部分にのみ適用されます。

これが簡単な例です：

 :: selection {
  バックグラウンドカラー：＃ff9900;
  色：#fff;
}

これにより、選択したテキストがオレンジ色の背景と白いテキストの色を備えています。 ::selection 、主にcolor 、 background 、 cursor 、およびテキストの外観に関連する他のいくつかのプロパティの限られたセットのみをサポートすることに注意してください。

また、特定の要素をグローバルに適用する代わりにターゲットにすることもできます。

 P :: selection {
  背景色：黃色。
}

これで、 <p></p>タグ內(nèi)のテキストのみが、選択されたときに黃色のハイライトを表示します。

ブラウザの互換性とフォールバック

注意すべきことの1つは、ブラウザのサポートです。ほとんどの最新のブラウザは::selectionをサポートしていますが、古いブラウザーはそうではないかもしれません。また、一部のモバイルブラウザは異なる動(dòng)作をするか、カスタムスタイルを完全に無視する場合があります。

より多くのベースをカバーするには：

• 常に異なるブラウザでテストしてください。
• 非常に古いバージョンをターゲットにしない限り、プレフィックスなしで標(biāo)準(zhǔn)の構(gòu)文を使用します。
• 重要なUIキューの::selectionのみに依存しないでください。デフォルトの動(dòng)作を置き換えるのではなく、強(qiáng)化する必要があります。

別のゴッチャ：SCSSまたはその他の前処理者を使用している場合、ネスト::selection問題を引き起こす可能性があります。上位レベルに保持するか、擬似要素用に設(shè)計(jì)されたミックスインを使用する方が安全です。

スタイリングのヒントと一般的な間違い

無理を避けてください。目標(biāo)は、読みやすさを改善したり、デザインのテーマに合わせたりすることです。微妙な変化はしばしば最適に機(jī)能します。

避けるべきいくつかのこと：

• 非常に明るい色または衝突色
• 過度に複雑な背景（とにかく勾配はサポートされていません）
• フォントスタイルの変更中央選択（確実に機(jī)能しません）

また、 ::selectionデフォルトで親スタイルから継承されないことを忘れないでください。したがって、コンテナをスタイリングすると、明示的に言われない限り、子供は自動(dòng)的に従いません。

サイト全體で一貫している場合は、StyleSheetの早い段階でグローバル::selectionスタイルを設(shè)定し、必要に応じてコンポーネントごとに調(diào)整することを検討してください。

それは基本的にそれだけです。それは小さな機(jī)能ですが、思慮深く使用するとサイトに素?cái)长圣荪辚氓伐澶蜃芳婴扦霗C(jī)能です。

以上が選択したテキストのスタイルをスタイリングするために:: selection pseudo-elementを使用する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。