css_selection 改变文字反选的背景颜色

在计算机操作中经常会有反选出现，系统一般会根据选择区域的颜色，显示出补色。但windows默认的文字选择时，背景为蓝色，前景色为白色，如果背景是深色，则文字为蓝色，背景变成白色。如下图所示：

反选后默认的样式

能不能改变选择的默认颜色呢，也许很多人对这个问题不是很在意，也可能你早就见到过这个效果了，但是却忽略了。查看示例(请在非IE浏览器下查看)

从博客里可以看到PPK给出了如下的CSS代码：

::-moz-selection{    /*针对Firefox*/
    background:#cc0000;
    color:#fff;
}
 
::selection {
    background:#cc0000;
    color:#fff;
}
 
code::-moz-selection {  /*code是标签选择器，可以换成p或span等*/
    background: #333333;
}
 
code::selection {
    background: #333333;
}

通过以上代码可以看出，你完全可以给不同的容器定义不同的反选背景颜色，下面给出一个示例：

<!-- body{ font-size:14px; font-family:Tahoma, "宋体", "微软雅黑", Arial, MingLiU; margin:0px; padding:0px; line-height:22px;} div,p,ul{ margin:9px auto; width:600px; padding:0px;} ul{ list-style:none;} div::selection{ color:#FFFF99; background:#7D0000;} div::-moz-selection{ color:#FFFF99; background:#7D0000;} p::selection{ color:#FFFFFF; background:#FF0000;} p::-moz-selection{ color:#FFFFFF; background:#FF0000;} -->
 
<ul>
 
	<li>1. 普通文本，反选采用默认颜色。</li>
 
 
	<li>2. 如果要查看下面的效果，请使用非IE浏览器。</li>
 
</ul>
 
 
<div>这里是div的内容，反选查看效果。</div>
 
 
这里是p的内容，反选查看效果。

发表评论 取消回复

发表评论取消回复