利用css3的属性来控制网页中被选中的文字颜色和背景色

浏览器中默认的选中的文字颜色为白色，背景色为蓝色。并且在火狐和google两个不同的内核浏览器下效果也不一样，google浏览器的两段文字之间的空格也会添加上背景色，火狐的就不会，效果如下：

图一 是google浏览器下的效果截图

图二 是火狐浏览器下的效果截图

下面两图就是修改后的效果：

图一 是火狐浏览器下的效果

图二 是google浏览器下的效果

下面就来说说如何利用css3的属性来控制网页中被选中的文字颜色和背景色：

通过查阅资料得知，设置[code]body ::selection[/code]的css属性可以控制，我博客的效果设置代码如下：

[code] body ::selection {
    color:#12C141;
    background-color:#060606;
    text-shadow:none;
}
body ::-moz-selection {
    color:#12C141;
    background-color:#060606;
    text-shadow:none;
}
 [/code]

其中的颜色和背景色可以更具自己的喜好来设置。

关于代码的几点说明：

（1）注意这里是两个冒号，不同于一般伪类的单冒号，此属性应用的css3属性；

（2）由于本站文字采用了[code]text-shadow:none;[/code]属性，而在文字选中后阴影会导致文字模糊，所以这里将阴影去掉，如果你的博客没有使用可以不用添加；

（3）ie6,7,8版本不支持此属性，ie9,10未测试；

经过测试，我的总结：

（1）IE9是支持此通过css定制选中文字的背景色的；IE7/IE8/IE9兼容性视图，都是不支持此效果的；

（2）关于选中的效果：IE9和FireFox都是存在行间距，而Chrome为整块选中状态，无行间距；

（3）上述背景色设置，使用[code]background-color[/code]或[code]background[/code]，都是有效的