css ::selection改变文字选择的背景颜色

选择文本，背景是红色，而文本是白色的问题，如下图所示：

或许大家对这样的实现并不陌生，可是有很多童鞋可能跟我一样，并不知道是如何实现，因为在默认情况下，选择网站文本都是深蓝的背景，白色的字体,就如下本站的而言，选择文本后，背景是深蓝色，而选中的文本就是白色，如下图所示：


后来带着这样的问题，我也是到处寻找解决的方法，几经高人指点，说是CSS的“::selection”实现的，这样一来在google中大量搜索有关于“::selection”的使用方法，功夫不负有心人，总算是搞清楚了。后来觉得这个蛮有意思的，特意整理出来与大家一起分享。

就如前面所言，大家都知道浏览器对选中的文本默认样式都是统一的，Windows下是一个深蓝色的背景，白字的前景，而在Mac下是一个淡蓝色背景，白色字体，就如上图所展示的一样，自从有了这个“::selection”选择器后，我们在部分浏览器中可以设置你所需要的样式，下面就让我来告诉大家如何使用这个“::selection”来改变在浏览器中选中文本后的背景色与前景色。

::-moz-selection{ /*针对Firefox*/

background:#cc0000;   

color:#fff;   

 }   

::selection {   

background:#cc0000;   

color:#fff;   

}           

code::-moz-selection { /*code是标签选择器，可以换成p或span等*/

background: #333333;   

}   

code::selection {   

background: #333333;   

}

兼容的浏览器：

::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”，查阅相关w3c官方资料，并没有对这个属性的解说资料，只知道这个属性被规纳在CSS的伪类选择器中。

::selection只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。