使⽤CSS3的：：selection改变选中⽂本颜⾊的⽅法
浏览器上页⾯⽂字选中后默认的背景⾊是⼀种蓝⾊，不同浏览器的颜⾊有些许差异，但⼤致相同，⽂字颜⾊也近乎⽩⾊，如下图所⽰，截⾃Firefox3.6浏览器：
在CSS3的爸爸妈妈还没有相亲认识的时候，要改变页⾯上⽂字选中后的背景⾊以及⽂字颜⾊，就跟让太监⽣孩⼦⼀样困难。但是，随着CSS3呱呱落地，获得越来越多的浏览器认可，⼀切⼜显得那么⾃然⽽然。虽然有些顽固的糟⽼头（如IE浏览器）还不认可这个新⽣的CSS3，但是，丝毫不影响其在其他浏览器上对UI的⼜⼀次改进。
⽬前Firefox、Safari、Chrome以及Opera浏览器都⽀持⽂本选择属性，如果浏览器不⽀持该属性，会直接忽略它，所以不会产⽣任何不良的影响。
下⾯就简单展⽰下这个改进UI体验的⼩技巧。
改变默认选中颜⾊
⾸先，简单点的例⼦，我们可以设置整个页⾯⽂本选中的基本样式，如下：
CSS Code复制内容到剪贴板
1. ::selection {
2.    background:#d3d3d3;
3.    color:#555;
4. }
5.
6. ::-moz-selection {
7.    background:#d3d3d3;
8.    color:#555;
9. }
10.
11. ::-webkit-selection {
12.    background:#d3d3d3;
13.    color:#555;
14. }
于是，⽂本选中的默认蓝⾊背景就此变成了淡灰⾊，如下图所⽰，截⾃Chrome浏览器：
当然，我们可以使⽤CSS选择器指定特定标签内容⽂字选中后的样式状态，例如下⾯所展⽰的栗⾊选中状态：
CSS Code复制内容到剪贴板
1. .maroon::selection {
2. background:maroon;
3. color:#fff;
4. }
5.
6. .maroon::-moz-selection {
7. background:maroon;
8. color:#fff;
9. }
10.
11. .maroon::-webkit-selection {
12. background:maroon;
13. color:#fff;
14. }
15. <p class="maroon">...⽂字内容。</p>
会得到类似下图的效果：
简⽽⾔之，要改变选中⽂本的颜⾊和背景颜⾊，需要使⽤ CSS3 新增的伪 ::selection，设置颜⾊ color 和背景颜⾊background-colcr 即可，如：
CSS Code复制内容到剪贴板
1. ::selection { color:#333; background-color:#cce8cf;}
2. ::-moz-selection { color:#333; background-color:#cce8cf;}
3. ::-webkit-selection { color:#333; background-color:#cce8cf;}
上⾯的代码效果如下图（截⾃ Firefox 5 浏览器）：
当然，你也可以结合CSS选择器，指定标签或区域⽂本选中后的样式状态。如：
CSS Code复制内容到剪贴板
1. h2::selection { color:#f60; background-color:#cce8cf;}
2. p::selection { color:#333; background-color:#cce8cf;}
3.
4. h2::-moz-selection { color:#f60; background-color:#cce8cf;}
5. p::-moz-selection { color:#333; background-color:#cce8cf;}
6.
7. h2::-webkit-selection { color:#f60; background-color:#cce8cf;}
8. p::-webkit-selection { color:#333; background-color:#cce8cf;}
⼤部分标签使⽤ selection 没有问题，但 a 标签在不同的浏览器下有差异，有的浏览器 a 标签不会应⽤上 ::selection 样式（如FF5，Chrome12），有些浏览器则会应⽤上 ::selection 样式（如 Opera 11.50）。这可能是有的浏览器认为a⽐较重要，为了让⽤户知道这是链接，所以不改变颜⾊。
>css特效文字

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。