Selection pseudo-element explanation_html/css_WEB-ITnose-HTML Tutorial-php.cn

Selection pseudo-element explanation_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:43

Original

1438 people have browsed it

Previous article: "A brief explanation of the difference between RGBA and Opacity"

Today I will talk about a simple pseudo-element ::selection, which is only used to change the text of the selected text. color and text background color.

By default, when text is selected on a web page, the text color is white and the text background color is blue. To change this selection style, you can use the ::selection pseudo-element to set the text color and text background color respectively.

To view the high-definition uncensored effect online, you can click here or directly click on the following URL:

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

given For example, let’s start with a paragraph:

HTML Markup:

<p>十八新娘八十郎，苍苍白发对红妆。 鸳鸯被里成双夜，一树梨花压海棠。</p>

Copy after login

Style modification:

p::selection{	background-color: red;	color:blue;}

Copy after login

The effect is as follows:

There are two points to note here:

The selection pseudo-element can only set two attributes, background-color and color, and cannot set any other attributes other than this

In CSS3, the selection pseudo element uses double colon::, and single colon: cannot be used. Writing a single colon will not play the role of selection, because it is stipulated in the CSS3 specification:

The pseudo-class is written using a single colon:, such as: last-child

The pseudo-element is written using a double colon::, such as::first-line and crotch ::selection

In CSS2, both pseudo-classes and pseudo-elements use a single colon:, but in the FF37.0.2 version and Chrome 43.0.2357.130 version, the single colon: selection does not work , before and after work

Previous article: "A brief explanation of the difference between RGBA and Opacity"