Introduction to how CSS beautifies selected text

The function of CSS is to beautify the content or structural hierarchy of web pages. We all know this, don't we? With the continuous innovation and upgrading of CSS technology, we have gained more ability to control styles. A not-so-well-known technique is that we can beautify the style of selected text in the browser. Windows itself provides an ugly dark green color, while Apple computers provide a light green color. Firefox, IE9, Opera and Google Chrome allow us to customize the color of selected text. Let me show you:

CSS code

/* webkit, opera, IE9 */
::selection { background:lightblue; }   
/* mozilla firefox */
::-moz-selection { background:lightblue; }

-moz-property prefix is ​​for Firefox, and the basic ::selection selector is for Google Chrome of. Like other CSS selectors, you can nest them to display different colors in different places:

/* webkit, opera, IE9 */
p.highlightBlue::selection { background:lightblue; }   
/* mozilla firefox */
p.highlightBlue::-moz-selection { background:lightblue; }   

/* webkit, opera, IE9 */
p.highlightPink::selection { background:pink; }   
/* mozilla firefox */
p.highlightPink::-moz-selection { background:pink; }

Using CSS to beautify the selected text is just a very simple technique, but These can make your website pages more gorgeous and colorful!

The above is the entire content of this article. I hope it will be helpful to everyone's study. I also hope that everyone will support the PHP Chinese website.

The above is the detailed content of Introduction to how CSS beautifies selected text. For more information, please follow other related articles on the PHP Chinese website!