【CSS3】::selection选择器
2016-02-23 17:27
513 查看
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示:
从上图中可以看出,用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中,默认显示样式为:蓝色背景、白色文本。
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
示例演示:
通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。
HTML代码:
CSS代码:
结果演示:
注意:
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
2、Firefox 支持替代的 ::-moz-selection。
从上图中可以看出,用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中,默认显示样式为:蓝色背景、白色文本。
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
示例演示:
通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。
HTML代码:
<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,</p>
CSS代码:
::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; }
结果演示:
注意:
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
2、Firefox 支持替代的 ::-moz-selection。
相关文章推荐
- 【CSS3】:checked选择器
- CSS3的border-radius属性详解
- 【CSS3】:disabled选择器
- 【CSS3】:enabled选择器
- 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch
- CSS3笔记
- css之!important 及display:inline 及clear:both
- css中a标签内容超出最大字数隐藏处理
- JS、CSS 文件的版本号控制
- CSS3 新属性
- 【CSS3】only-of-type选择器
- 【CSS3】only-child选择器
- css 学习1 css基础
- 【CSS3】nth-last-of-type(n)选择器
- 【CSS3】last-of-type选择器
- 【CSS3】nth-of-type(n)选择器
- 【CSS3】first-of-type选择器
- 【CSS3】结构性伪类选择器—nth-last-child(n)
- 【CSS3】结构性伪类选择器—nth-child(n)
- 【CSS3】结构性伪类选择器—last-child