禁止用户选择：body { user-select: none; }
user-select: none 是 CSS 中一个非常实用的属性，它能够控制用户是否可以选择页面上的文本内容。通过将其设置为 none，可以禁止用户选中特定元素内的文本，这在某些场景下非常有用，比如保护版权内容或提升用户体验。
什么是 user-select: none
user-select 是一个 CSS 属性，用于控制用户是否可以选择文本。它的取值包括：
auto（默认值）：允许用户选择文本。none：禁止用户选择文本。text：允许用户选择文本（即使父元素设置了none）。all：允许用户一键选中整个元素的内容（比如点击一次选中整个段落）。
当我们在 body 上设置 user-select: none 时，整个页面的文本内容都无法被用户选中。这在某些 UI 设计中很有用，比如游戏界面、幻灯片演示或某些需要防止复制的场景。
如何使用 user-select: none
基本用法
body {
user-select: none;
}
这段代码会禁止用户选择页面上的任何文本。如果只想禁止选择特定元素的文本，可以这样写：
.no-select {
user-select: none;
}
然后在 HTML 中：
<p class="no-select">这段文字无法被选中。</p>
<p>这段文字可以被选中。</p>
浏览器兼容性
user-select 在不同浏览器中可能需要添加前缀：
body {
-webkit-user-select: none; /* Safari, Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
实际应用场景
1. 防止文本复制
某些网站不希望用户复制其内容，比如付费文章或版权保护的资料：
.article-content {
user-select: none;
}
2. 提升交互体验
在拖拽或点击交互频繁的界面中，禁止文本选择可以避免误操作：
.draggable-item {
user-select: none;
}
3. 游戏或动画界面
游戏 UI 通常不需要文本选择功能，禁用后可以避免干扰：
.game-ui {
user-select: none;
}
注意事项
1. 不影响表单输入
user-select: none 不会阻止用户在输入框（<input>、<textarea>）中选择文本。如果需要禁用输入框的文本选择，可以这样：
input, textarea {
user-select: none;
}
2. 无法完全防止内容被复制
虽然 user-select: none 能阻止普通用户通过鼠标选择文本，但无法阻止开发者通过浏览器开发者工具查看或复制内容。如果需要更强的保护，可能需要结合 JavaScript 或其他技术。
3. 可能影响可访问性
禁用文本选择可能会对某些用户（比如依赖屏幕阅读器的用户）造成不便。因此，在使用时应权衡利弊。
结合 JavaScript 动态控制
可以通过 JavaScript 动态切换 user-select 属性：
document.body.style.userSelect = 'none'; // 禁止选择
document.body.style.userSelect = 'auto'; // 恢复选择
或者通过类名切换：
.disable-selection {
user-select: none;
}
document.body.classList.add('disable-selection'); // 禁止选择
document.body.classList.remove('disable-selection'); // 恢复选择
与其他 CSS 属性的结合
1. 与 cursor 结合
在禁止选择的元素上，可以修改鼠标指针样式以提示用户：
.no-select {
user-select: none;
cursor: not-allowed;
}
2. 与 pointer-events 结合
如果需要完全禁止交互，可以结合 pointer-events：
.no-interaction {
user-select: none;
pointer-events: none;
}
示例：实现一个不可选择的卡片
以下是一个完整的示例，展示如何创建一个不可选择的卡片：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.card {
width: 200px;
padding: 20px;
background: #f0f0f0;
border-radius: 8px;
user-select: none;
}
</style>
</head>
<body>
<div class="card">
<h3>不可选择的卡片</h3>
<p>这段文字无法被鼠标选中。</p>
</div>
</body>
</html>
高级用法：部分内容允许选择
即使父元素设置了 user-select: none，子元素仍然可以通过 user-select: text 允许选择：
.parent {
user-select: none;
}
.child {
user-select: text;
}
<div class="parent">
<p>这段文字无法被选中。</p>
<p class="child">这段文字可以被选中。</p>
</div>
性能影响
user-select: none 对性能的影响微乎其微，但在极端情况下（比如页面中有数千个元素应用了该属性），可能会略微增加渲染开销。
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
