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

前の記事: 「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の違いを簡単に説明」