CSS ::selection伪类选择器

CSS ::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属性，设置其他属性是没有任何效果的。

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

转自：http://www.w3cplus.com/content/css-selection