当鼠标选中网页上的文本时,默认的样式为蓝底白字,在CSS 3中,这种样式是可以自定义的。CSS 3中有UI元素状态伪类::selection,该属性可以设置文本选中的效果。图1.3为默认样式与自定义样式的对比图。

Image00005

HTML很简单:

 <body>
  自定义文本选中样式演示网页
 </body>

CSS代码较为简单,使用E::selection:{CSS样式}即可,图中效果的代码如下:

01 ::selection
02 {
03      color:#9400D3;         /*字体颜色*/
04      background:#A9A9A9;    /*背景颜色*/
05 }
06 ::-moz-selection            /*Firefox下的设置*/
07 {
08      color:#9400D3;
09      background:#A9A9A9;
10 }

注意: 在老版本的Firefox下,可能需要加-moz-前缀做兼容。与其他伪类不同,这一伪类的前面有两个冒号,请注意不要遗漏。