CSS3 ::selection 选择器 详解
css3基础 2023-07-22 16:53:40小码哥的IT人生shichen
CSS3 ::selection 选择器
实例
使被选中的文本成为红色:
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
完整实例【亲自试一试】:
<!DOCTYPE html>
<html>
<head>
<style>
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
</style>
</head>
<body>
<h1>请试着选取页面上的文本</h1>
<p>这是一个段落。</p>
<div>这是 div 元素中的文本。</div>
<br>
<a href="http://www.phpcodeweb.com" target="_blank">访问 phpcodeweb !</a>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -moz- 的数字表示使用前缀的首个版本。
选择器 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
::selection | 4.0 | 9.0 | 62.0 2.0 -moz- |
3.1 | 10.1 |
定义和用法
::selection 选择器匹配被用户选取的选取是部分。
只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。