经常在淘宝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浏览器那样智能，无效背景采取默认的处理方式，而是会在文字的选中区域出现空白。所以说，这个属性是不能设置背景图片。如果纯粹是为了增加页面文章观感的新颖，就直接使用纯色背景吧！