小码哥的IT人生

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。

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024