CSS3基础CSS3实现改变网页文字被选中时的状态

CSS3实现改变网页文字被选中时的状态

我们都知道,在网页中要复制一段文字,首先得选中要复制的文字,而大多数时候我们选中一段文字的时候,这段文字会变成蓝色背景和白色的文字,以表示这段文字已经被选中了。这个蓝色背景和白色文字的样式,我们也可以通过CSS来自定义,这样会给用户一种新鲜的感觉,而且有时候我们还可以根据自己网站的主题风格来设置文字被选中时的状态。

实现改变被选中文本状态的CSS属性是【::selection】,英文selection解释为被选中者,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {margin:50px;}
#text2 {margin:20px 0;}
#text2::selection {
background:#FB64A2;
color:#000;
}
</style>
</head>
<body>
<div id="text">
加拿大位于北美洲最北端,英联邦国家之一,素有“枫叶之国”的美誉,首都是渥太华。
</div>
<div id="text2">
加拿大是世界上拥有高生活品质,社会富裕,经济发达的国家之一。
</div>
<div id="text3">
加拿大是世界上海岸线最长的国家,海岸线约长24万多公里。
</div>
</body>
</html>

这个网页中有三个div块,我们给中间一个div定义了文本被选中状态,所以我们选中第二段文本的时候,其背景颜色和文字颜色产生了改变。第一段文字没有定义该规则,所以选中第一段文字的时候,显示的是默认的蓝色背景。

文字选中状态.png

CSS还可以控制文本不可被选中,这里要用到user-select属性,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {margin:50px;}
#text2 {margin:20px 0;}
#text2::selection {
user-select:none;
}
</style>
</head>
<body>
<div id="text">
加拿大位于北美洲最北端,英联邦国家之一,素有“枫叶之国”的美誉,首都是渥太华。
</div>
<div id="text2">
加拿大是世界上拥有高生活品质,社会富裕,经济发达的国家之一。
</div>
<div id="text3">
加拿大是世界上海岸线最长的国家,海岸线约长24万多公里。
</div>
</body>
</html>

浏览这个网页,我们试试全选,会发现中间的这段文字不能被选中:

文字不能被选中.png

这是因为中间这个div我们定义了user-select:none这个属性值,它表示文本不可被选中。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/38.html