CSS3 selector :: selection selector

":: selection" pseudo-element is used to match the highlighted text (the text when the text selection with the mouse). Browser by default, select the page text with the mouse on a "deep blue background, white font" display results as shown below:

As can be seen from the figure above, use the mouse to select the "Focus on IT, Internet technology," "pure dry, apply their knowledge", "Yes, it's free." This is three lines of text, the default display style is: Blue background, white text.

Sometimes the design requirements, do not use the default browser on the map that highlighted text effects, requires a different effect, this time ":: selection" pseudo-element is very practical. But in the Firefox browser, you need to add a prefix.

Example shows:

By ":: selection" selector, the selected text in the Web turns red background, text turn green.

HTML code:

<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,</p>

CSS code:

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

Guess you like

Origin blog.csdn.net/qq_39412143/article/details/91042293