经常在淘宝ued上看文章,一次突然对其文章的文字选中情况下感兴趣,淘宝ued的选中文字下其背景色并非是默认的蓝色,而是醒目的橙色。如图:

默认选中文字的背景和颜色 改变选中文字的背景和颜色

::selection的研究?

这种特别的效果,最初我是想到可能是通过javascript更改document的默认行为,从而去达到的,但是经过了一段时间的百度和google,最后并无相关的技术文章。于是,在时间有限的情况,直接网页保存本地对其逐段代码研究,最后查找到了::selection属性。有了方向后,再去查询::selection的相关内容,得到了::selection的语法:

::selection{background:#F60;color:#fff;}   /*一些主流浏览器*/
-moz-selection{background:#F60;color:#fff;} /*firefox浏览器*/

demo的代码如下:

<style>
.box p::selection{background:#F60;color:#fff;}
.box p::-moz-selection{background:#F60;color:#fff;}
</style>


<div class="box">
<p>CSS 选择器是一种应用于 DOM 节点查找场景的特定微型语法,本质上和正则表达式一样都是一种模式匹配语言,灵活使用可以方便得获取指定置的节点集合。
</p>
</div>

最后得到我们想要的效果,需要再此说明的是,::selection的属性除了背景色和文字颜色,不可操作其他属性(例如font-size,line-height等),还有::selection这个属性必须加在作用的标签上,如果你将其添加到父级元素上则不会有任何的效果,可见这个属性并没有继承性!

兼容性如何?

经过轮番测试,到目前为止,支持这个伪类属性的只有ie9+,chrome ,safari, firefox ,opera浏览器。所以说,在兼容性方面,只能是高级浏览器支持,再说其本来就是一个隐藏的很深的一个属性!

是否可以支持背景图片?

关于是否支持背景图片这个问题,是后来向自己提的。于是删除当前的背景色,给对应的段落标签设置背景图片:

.box p::selection{background:url(../images/bg.jpg);color:#fff;}
.box p::-moz-selection{background:url(../images/bg.jpg);color:#fff;}

结果如下。

Chrome:

Chrome-设置图片背景的selection

其他浏览器:

其他浏览器-设置图片背景的selection

真相告诉我们,其他浏览器并不会像chrome浏览器那样智能,无效背景采取默认的处理方式,而是会在文字的选中区域出现空白。所以说,这个属性是不能设置背景图片。如果纯粹是为了增加页面文章观感的新颖,就直接使用纯色背景吧!