修改网页中被选中文字样式(如背景颜色)的方法

现在大家在浏览器网站的时候,会发现越来越多的网站出现了这么一个效果,就是鼠标选中页面中文字的时候,被选中的文字体现出来的不是传统的蓝底白字还是其他颜色,如拉勾网中文字被选中的效果:

修改网页中被选中文字的样式

说实话,这个效果实际的用处并不是太大,有没有均不会对网站的用户体验造成太大影响,但如果合理利用,将被选中文字的样式(如背景颜色等)设置成和网站主色调相似的颜色,会显得页面更舒服一些。好吧,废话不多说,怎么实现呢?很简单,利用css3中提供的::selection伪类选择器即可。
演示代码如下:

<style>
    h1::selection{
    background: greyellowgreenen;
    color: white;
 }
    h1::-moz-selection{
    background: yellowgreen;
    color: white;
 }
 </style>
 <h1>后盾网 人人做后盾(效果分享:孙琪峥)</h1>

实际效果演示请猛戳这里:效果传送门

注意:经实际测试,ie、谷歌、斯巴达等浏览器就能直接识别,火狐浏览器需要加-moz-的专属前缀。

关于博主
骨灰级博客玩家
国内第一批90后网站站长/程序员
做过七年前端讲师
目前从事锦鲤观赏鱼电商行业
鱼贝贝锦鲤创始人
文章列表
1
WordPress 4.8在首页模板中添加友情链接的方法
WordPress 4.8在首页模板中添加友情链接的方法
2
使用wps将word转pdf时丢失内容(部分内容不显示)的解决方案
使用wps将word转pdf时丢失内容(部分内容不显示)的解决方案
3
浏览器收藏夹http网址自动跳转到https的解决方法
浏览器收藏夹http网址自动跳转到https的解决方法
4
【推荐】Clover - windows系统中优秀的资源管理器扩展软件
【推荐】Clover - windows系统中优秀的资源管理器扩展软件
5
Node.js中mongoose模块连接MongoDB数据库时提示(node:12580) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.的解决方案
Node.js中mongoose模块连接MongoDB数据库时提示(node:12580) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.的解决方案
最新评论
比比拉布
比比拉布
5月7日
太感谢了!!!!!!找了这么多的教程,只有你点出来了关键点——设计视图!!!!
Jake
Jake
3月7日
Halo 啊~麻烦更新下我的博客地址,原名:Jing Blog。麻烦更新如下: Jake Blog(后缀可以省略,也可以保留,看哪个风格适合) 网址:htt
评论于关于博主