当前位置：首页 → 问答吧 → 问一个CSS代码

问一个CSS代码

时间：2010-05-19

来源：互联网

请问http://www.bbon.cn/2010/04/new-version-of-google-web-design.html中，选定文字时怎么变成的红色？我们平常都是蓝色的。

请问如何实现像上“选中文字时”出现的红色的文字背景效果？谢谢帮忙！

作者: yangzhipeng 发布时间: 2010-05-19

能说详细一点吗？是纯文本选定，还是？？

作者: yangyifeng2010 发布时间: 2010-05-19

那是背景来的

作者: cloudgamer 发布时间: 2010-05-19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <title>文本选中样式-小龙女-www.xlnv.net</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css">  </style> </head><body> <h2>文本选中样式</h2> <p>可以给用户选中的文本定义字体颜色 <code>color</code> 和背景颜色 <code>background</code> 。</p> <p>不支持IE浏览器，支持Firefox、Opera、Chrome、Sarari。</p> <p>选择本页中的文字查看效果，如果浏览器支持的话会看到<span class="selected">这样的效果</span></p> <h3>测试使用的样式表：</h3> <pre><code>::selection { background:#cc00cc; color:#fff; } ::-moz-selection{ background:#cc00cc; color:#fff; } code::selection { background: #666666; } code::-moz-selection { background: #666666; } </code></pre> <p>Firefox浏览器使用 <code>::-moz-selection</code> 选择符，其他浏览器皆采用 <code>::selection</code> 选择符，文本选中样式只支持 <code>color</code> 和 <code>background</code> 属性</p> <p><a href="http://www.xlnv.net">小龙女</a></p> </body></html>
提示：您可以先修改部分代码再运行

看效果；
特注：IE不支持这种变色效果

[ 本帖最后由 cwq2jxl 于 2010-5-19 14:24 编辑 ]

作者: cwq2jxl 发布时间: 2010-05-19

哦
原来这样

作者: cloudgamer 发布时间: 2010-05-19

CSS3新特性.

作者: YstarLongzi 发布时间: 2010-05-19

对的！就是这样谢谢！

作者: yangzhipeng 发布时间: 2010-05-19