核心CSS属性：user-select
user-select 属性用于控制用户是否能够选中文本。
（图片来源网络，侵删）
禁止所有内容选择（最常用）
如果你想禁止整个页面或某个特定区域内的所有文本选择,可以使用以下CSS代码：
/* 方法一：使用 'none' */
.no-select {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* 标准语法 */
}
如何使用：
你可以将这个类（.no-select）应用到任何HTML元素上，比如整个 <body>，或者某个 <div> 容器。
示例：禁止整个页面复制
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">禁止选择文本示例</title>
<style>
body {
/* 对所有主流浏览器生效 */
-webkit-user-select: none; /* Chrome, Safari, Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* 标准 */
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>试着用鼠标选中这段文字，你会发现你无法选中它。</p>
<p>这可以用于保护版权内容或防止用户意外复制。</p>
</body>
</html>
user-select 属性的常用值
| 值 | 描述 |
|---|---|
none |
文本不能被选中。 这就是你需要的值。 |
auto |
默认值，如果元素是 unselectable 或文本输入控件，则不能被选中，否则可以。 |
text |
文本可以被选中（默认行为）。 |
all |
点击元素内的文本时，会选中该元素内的所有文本。 在一个 <p> 标签上设置 user-select: all，点击该段落会选中整个段落的文字，而不是部分。 |
contain |
可以选中，但选择范围被限制在当前元素内。 在一段很长的文字中，即使你从文字中间开始拖动选择，选择范围也不会超出该元素所在的容器。 |
注意事项和重要提醒
虽然 user-select: none 很好用,但在使用时需要注意以下几点：
它不是真正的安全措施
这个CSS属性只是一个用户体验（UX）层面的提示，它不能真正保护你的内容不被复制。
- 用户仍然可以查看源代码： 任何人都可以通过浏览器的“查看页面源代码”功能看到你的HTML和文本内容。
- 用户可以禁用JavaScript/CSS： 技术用户可以在浏览器设置中禁用JavaScript或CSS,从而绕过这个限制。
- 用户可以使用截图： 这是最简单、最无法阻止的复制方式,用户只需对内容进行截图即可。
user-select: none 适用于防止无意或快速的复制，以及改善某些交互体验（在拖拽操作时防止误选文本）。不要用它来保护高敏感或核心机密数据。
对用户体验的影响
- 影响复制： 用户可能需要复制页面上的一些无关紧要的文本（比如错误信息），如果你的页面全局禁止选择,这会给用户带来不便。
- 影响交互： 在某些富文本编辑器或可拖拽的界面中，
user-select: none可能会干扰正常的交互操作。
最佳实践： 尽量局部应用这个样式，而不是全局应用到 <body>,只在你确实需要保护的内容上使用它。
（图片来源网络，侵删）
<div class="protected-content">
<p>这是受版权保护的段落，请不要复制。</p>
<p>这里的文字也无法被选中。</p>
</div>
<p>这是普通段落，你可以自由选择这里的文字。</p>
<style>
.protected-content {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
浏览器兼容性
user-select 属性在现代浏览器中得到了广泛支持，为了兼容旧版浏览器（尤其是IE），需要加上 -ms- 前缀，对于基于Webkit的浏览器（Chrome, Safari），加上 -webkit- 前缀是一个好习惯。
| 需求 | 解决方案 |
|---|---|
| 禁止文本选择和复制 | 使用 user-select: none; 并添加必要的浏览器前缀。 |
| 应用到整个页面 | 将样式添加到 body 标签上。 |
| 应用到特定元素 | 将样式添加到具体的元素或类上（推荐）。 |
| 保护重要内容 | CSS无法提供真正的安全，应结合其他技术（如服务端验证、DRM等）并告知用户版权信息。 |
在你的CSS中添加以下代码即可：
.your-selector {
-webkit-user-select: none; /* For Safari */
-moz-user-select: none; /* For Firefox */
-ms-user-select: none; /* For IE/Edge */
user-select: none; /* Standard syntax */
} 
