CSS3选择器 ::selection选择器
css3 选择器 Selection
2023-09-11 14:22:19 时间
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示:
从上图中可以看出,用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中,默认显示样式为:蓝色背景、白色文本。
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
示例演示:
通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。
HTML代码:
<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,</p>
CSS代码:
::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; }
结果演示:
相关文章
- css3滚动条
- 使用jQuery和CSS3实现的“加载中”效果按钮 极客标签 - 做最棒的极客知识分享平台
- [CSS3] CSS Background Images
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
- CSS3无前缀脚本prefixfree.js与Animatable使用
- [CSS3] Apply Image Filter Effects With CSS
- [CSS3] Understand CSS Selector Specificity
- 最全CSS3选择器
- Atitit.隔行换色 变色 css3 结构性伪类选择器
- Atitit.隔行换色 变色 css3 结构性伪类选择器
- 【CSS3】CSS3 伪元素选择器 ( 伪元素选择器语法简介 | 伪元素选择器权重计算 | 代码示例 )
- 【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
- CSS3中的pointer-events