当鼠标选中网页上的文本时,默认的样式为蓝底白字,在CSS 3中,这种样式是可以自定义的。CSS 3中有UI元素状态伪类::selection,该属性可以设置文本选中的效果。图1.3为默认样式与自定义样式的对比图。
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-前缀做兼容。与其他伪类不同,这一伪类的前面有两个冒号,请注意不要遗漏。