网页前端开发 - CSS ::Selection

选择文本，背景是红色，而文本是白色的问题，这个问题图趣从网上搜过好多，但大都答非所问，有的直接回答copy到word里，改...，博客园上图趣终于找到了问题答案，如下图所示：

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

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

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

::selection使用语法：

/*Webkit,Opera9.5+,Ie9+*/
   ::selection {
	background: 颜色值；
	color:颜色值；
   }
   /*Mozilla Firefox*/
   ::-moz-selection {
	background: 颜色值；
	color:颜色值；
    }

兼容的浏览器：

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

下面我们一起来看看其具体使用，例如如我们在Web页面中有这么一段话：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor pede sit amet odio varius consectetuer. Fusce bibendum neque eu purus. Donec et nulla at odio volutpat luctus. Cras facilisis consequat nisi. Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.

在默认情况下，在上面段落中选中任意文本，其背景都是深蓝，前景是白色，下面我们给他加上一个“::selection”运用，把背景改成红色，前景依旧是白色：

p::selection {
    background: red;
    color: #fff;
  }
  p::-moz-selection {
    background: red;
    color: #fff;
  }

加上上面属性后，你会后到，选中的文本其背景是红色，而前景是白色，跟唐人的CSS帝国的效果是一模一样的了，如下图所示：

不知道你有没有这样的想法，我一开始冒出这样的一个想法，就是我能不能通过“::selection”来改变选中的文本其他样式呢？比如说，改变选中的字体，字号等等；于是我在上面的代码基础上加了一个15px的字号：

p::selection {
     background: red;
     color: #fff;
     font-size: 15px;
   }
		
   p::-moz-selection {
     background: red;
     color: #fff;
     font-size: 15px;
   }

大家猜结果如何？告诉大家吧，有点失望，结果是没有任何效果，如下所示：

这样一来也验证了:“::selection”只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。

一个小小的技巧分享，希望能对有需要的朋友有所帮助。