CSS特殊伪类::selection改变页面选中文字的样式

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

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

正好要给这家酒店做一个项目,那我就要继承它的这个样式了,写法很简单,在样式表初始化的地方添加这一条即可:
[code]*::selection {
background-color: #1B7774;
color: #FFF;
}[/code]
给所有的元素都定义了::selection伪类,注意这个特殊的伪类有两个冒号,而且只支持背景颜色和文字颜色,你要给它添加文字大小等其他属性,那是白费劲。这也好,如果能够随便添加其他属性,那页面就乱了。

如果要给指定一段文字添加选中部分的样式,只要把伪类别给单独的class或者id即可。
兼容性:IE9+,Chrome,Opera,Safari,Firefox…
兼容Firfox需要加-moz-前缀,这里顺便给自己的博客也加上这条样式:
[code]::-moz-selection {
background-color: #21759B;
color: #FFF;
}
::selection {
background-color: #21759B;
color: #FFF;
}[/code]
顺便注意了下这样写是无效的,其实任何带这种前缀的css类用逗号和别的类写在一起是都无效的:
[code]::-moz-selection,
::selection { //无效写法,请勿模仿
background-color: #21759B;
color: #FFF;
}[/code]
推荐链接:::selection在MDN上的参考文档

本站所有文章均为原创,欢迎转载,但请注明文章出处:http://blog.brain1981.com/654.html

» 本文来自:前端开发者 » 《CSS特殊伪类::selection改变页面选中文字的样式》
» 本文链接地址:https://www.rokub.com/5287.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!