css 防止文本蓝色选择 - CSS (1)

📌 相关文章

📜 css 防止文本蓝色选择 - CSS (1)

📅 最后修改于: 2023-12-03 15:30:12.479000 🧑 作者: Mango

CSS 防止文本蓝色选择 - CSS

在 Web 开发中，鼠标选中文本时会出现蓝色的背景色，当我们需要自定义选中文本的背景色时，可以使用 CSS 中的 user-select 属性来控制。同时可以通过 ::-moz-selection 和 ::selection 伪元素来控制选中文本的样式。

语法格式

/* 禁止选中文本 */
body{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* 自定义选中文本样式  */
::selection{
	background-color: #f00;
	color: #fff;
}
::-moz-selection{
	background-color: #f00;
	color: #fff;
}

属性值解释

user-select 属性的值可以是以下几种：

auto：文本能被选择，默认值。
none：文本不能被选择。
text：文本能被选择，但不能选中任何字符。
contain：文本能被选择，但选中的范围必须包含文字。
all：文本能被选择，可以全选。

::selection 和 ::-moz-selection 伪元素可以设置选中文本的样式，其中 ::selection 是适用于大多数浏览器的伪元素样式，而 ::-moz-selection 则是 Firefox 浏览器专属的样式。

实例代码

以下是一个简单的示例代码，展示了如何禁止选中文本和自定义选中文本样式。

<!DOCTYPE html>
<html>
	<head>
		<title>CSS 防止文本蓝色选择</title>
		<style>
			body{
				/* 禁止选中文本 */
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			/* 自定义选中文本样式  */
			::selection{
				background-color: #f00;
				color: #fff;
			}
			::-moz-selection{
				background-color: #f00;
				color: #fff;
			}
			/* 示例文字样式 */
			p{
				font-size: 16px;
				line-height: 1.5;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In turpis nunc, consectetur vel convallis sed, feugiat vel lorem. Quisque vitae tellus pharetra, faucibus eros in, molestie libero. Mauris blandit metus eget ullamcorper rhoncus. Nullam vitae nisi vitae lectus tincidunt condimentum. Aliquam porttitor ullamcorper quam, id pharetra ipsum sollicitudin et. </p>
		<p>Aenean pharetra imperdiet dignissim. Sed sollicitudin libero ut purus faucibus porta. Nam nec tellus enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia metus in ante ornare, vel bibendum odio consectetur. Integer sed felis in est lacinia commodo. Curabitur a lectus ac dui vehicula pellentesque. Donec mauris velit, scelerisque id fringilla sit amet, vulputate et mi. </p>
	</body>
</html>

浏览器兼容性

CSS user-select 属性和 ::selection 伪元素以及 ::-moz-selection 伪元素在不同浏览器中的兼容性如下表所示：

| 属性/伪元素 | Chrome | Firefox | Safari | IE | Edge | Opera | | --- | --- | --- | --- | ---| --- | --- | | user-select | 54 | 69 | 3 | 10 | 12 | 41 | | ::selection | 1 | 1 | 3.1 | 9 | 12 | 10.1 | | ::-moz-selection | 1 | 1 | - | - | - | - |

需要注意的是 IE 浏览器需要加上前缀 -ms-，而 Edge 浏览器和 Opera 浏览器不需要加前缀。而 ::selection 伪元素在 Safari 浏览器中从 1.1 版本开始支持。

总结

希望通过本文的介绍，程序员能够了解 CSS 中的 user-select 属性和 ::selection 伪元素的用法，以及如何使用它们来防止文本蓝色选择，自定义选中文本的样式。