コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 選択疑似要素の説明_html/css_WEB-ITnose

選択疑似要素の説明_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:41:43
オリジナル
1437 人が閲覧しました

前の記事: 「RGBA と不透明度の違いの簡単な説明」

今日は、テキストの色とテキストの背景色を変更するためにのみ使用される簡単な 疑似要素::selection について説明します。が選択されます。

Web ページでテキストを選択すると、デフォルトでテキストの色は白、テキストの背景色は青になります。この選択スタイルを変更するには、::selection 疑似要素を使用してテキストの色とテキストの背景色を設定します。それぞれ。

高解像度の無修正エフェクトをオンラインで表示するには、ここをクリックするか、次の URL を直接クリックしてください:

http://codepen.io/myvin/pen/bdLXvK

例として、段落:

HTML マークアップ: 

<p>十八新娘八十郎，苍苍白发对红妆。 鸳鸯被里成双夜，一树梨花压海棠。</p>
ログイン後にコピー

スタイル変更:

p::selection{	background-color: red;	color:blue;}
ログイン後にコピー

効果は次のとおりです:

ここで注意すべき点が 2 つあります:

  • 選択疑似要素は、background-color 属性と color 属性のみを設定できます。 , これ以外の属性は設定できません

  • CSS3 では、選択疑似要素は二重コロン:: を使用し、単一コロン: を記述することは規定されているため、選択の役割を果たしません。 CSS3 仕様では:

  • 擬似クラス Colon: を記述するときは単一のコロンを使用します (例: last-child
    • )
  • 擬似要素 は二重コロン:: を使用して記述します (::first-line など) CSS2 では、疑似クラスと疑似要素の両方で単一のコロン:: コロン: が使用されますが、FF37.0.2 バージョンと Chrome 43.0.2357.130 バージョンでは、単一のコロン: 選択は機能しません。作業前と作業後
    • 前の記事：「RGBAとOpacityの違いを簡単に説明」

    • 関連ラベル：
    selection伪元素小解
    ソース：php.cn
    前の記事：HTML_html/css_WEB-ITnose を動的にバインドする 次の記事：軽量の HTML/CSS/JS フレームワーク: MUI_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    配列内に要素が存在するかどうかを判断するプロセスが無効です ご迷惑をおかけして申し訳ありませんが、これを理解するのに2時間ほど費やしました。問題は、コードが 1 つの要素のみを追加し、他の ID を追加しないことです。「すでにある」 $(f...
    から 2024-04-03 13:03:54
    0
    1
    377
    React.js CSS ウィンドウの幅 Reactを使用してレスポンシブWebサイトを開発しています。スタイル設定には CSS スタイルシートを使用します。応答部分は @media クエリを使用して CSS で実装されま...
    から 2024-03-31 16:31:23
    0
    1
    386
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート