::selection这个伪类比较冷门，很少有人会对默认选中文本的深蓝色背景提出异议，所以一般的网站建设中很少有人会去定义它，也只有一小部分追求极致的设计师会有这样的要求。然而今天有一个网站给我上了一课：

这是一个国外的酒店网站，色系是普通的黑色+绿色高亮元素。特别注意到它选定的文字的高亮色也和页面上的标题、按钮、链接等高亮色一致，漂亮！

正好要给这家酒店做一个项目，那我就要继承它的这个样式了，写法很简单，在样式表初始化的地方添加这一条即可：

1
2
3
4

*::selection {
	background-color: #1B7774;
	color: #FFF;
}

给所有的元素都定义了::selection伪类，注意这个特殊的伪类有两个冒号，而且只支持背景颜色和文字颜色，你要给它添加文字大小等其他属性，那是白费劲。这也好，如果能够随便添加其他属性，那页面就乱了。

如果要给指定一段文字添加选中部分的样式，只要把伪类别给单独的class或者id即可。
兼容性：IE9+，Chrome，Opera，Safari，Firefox…
兼容Firfox需要加-moz-前缀，这里顺便给自己的博客也加上这条样式：

1
2
3
4
5
6
7
8

*::-moz-selection {
	background-color: #21759B;
	color: #FFF;
}
*::selection {
	background-color: #21759B;
	color: #FFF;
}

顺便注意了下这样写是无效的，其实任何带这种前缀的css类用逗号和别的类写在一起是都无效的：

1
2
3
4
5

*::-moz-selection,
*::selection { //无效写法，请勿模仿
	background-color: #21759B;
	color: #FFF;
}

推荐链接：::selection在MDN上的参考文档

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/654.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。