CSS改变网页中鼠标选中文字背景颜色例子

你是否曾经注意到，在不同的浏览器和系统上，被选中的文字样式往往单调乏味？在Windows系统中，被选中的文字颜色往往是沉闷的墨绿色，而在苹果电脑上则是平淡的浅绿色。幸运的是，现代的浏览器为我们提供了自定义被选文字颜色的强大功能。火狐浏览器、IE9、Opera以及谷歌浏览器都允许我们利用CSS来改变被选文字的样式。

让我们深入一下如何实现这一功能。你可以使用CSS的::selection选择器来为所有浏览器定义被选文字的样式。这个选择器可以让你指定背景颜色，从而改变被选文字的颜色。例如：

```css

/ 针对Webkit内核的浏览器（如Chrome和Safari）、Opera以及IE9 /

::selection {

background: lightblue;

}

```

对于火狐浏览器，你需要使用::-moz-selection选择器，它具有和::selection相似的功能：

```css

/ 针对Mozilla Firefox /

::-moz-selection {

background: lightblue;

}

```

你可以根据需要，为不同的元素或类定义不同的被选文字样式。例如，如果你想要在某些特定的段落或文本上应用高亮蓝色或粉红色的样式，你可以这样做：

```css

/ 针对Webkit内核的浏览器、Opera以及IE9 /

div.highlightBlue::selection {

background: lightblue;

}

div.highlightPink::selection {

background: pink;

}

/ 针对火狐浏览器 /

div.highlightBlue::-moz-selection {

background: lightblue;

}

div.highlightPink::-moz-selection {

background: pink;

}

```

通过这些简单的CSS技巧，你可以轻松地为你的网站增添色彩和活力。无论是高亮显示重要的信息，还是为页面添加个性化的元素，自定义被选文字的样式都是一个强大的工具。不要再让你的网页显得单调乏味，利用CSS来美化你的网站吧！