user-select 是控制文本是否可被鼠标选中的标准 CSS 属性，现代浏览器（Chrome 54+、Firefox 69+、Safari 3.1+、Edge 79+）均支持，无需前缀。但它的行为在不同浏览器中存在细微差异，且容易被误用为“防复制”手段——实际上它完全不阻止用户通过开发者工具、截图或键盘快捷键（如 Ctrl+A + Ctrl+C）获取内容。
为什么 user-select: none 有时没生效
常见原因包括：
-
user-select不会继承，父元素设了none，子元素仍可能被选中，除非显式重置或使用all/text - 某些元素（如
<input>、<textarea>）默认忽略该属性，它们的选中行为由 UA 样式表控制 - 在 Safari 中，
user-select: none对<button>内文本可能无效，需配合-webkit-user-select: none（尽管现代 Safari 已支持无前缀） - 设置了
pointer-events: none的元素，虽然不可交互，但不影响其子元素被选中——这常被误认为是user-select失效
user-select 的合法值与适用场景
关键取值及实际效果：
-
none：禁用所有选中（含双击、拖拽、Ctrl+A），但焦点和键盘导航不受影响 -
text：仅允许文本选中（适用于按钮、卡片标题等需交互但不希望误选文字的场景） -
all：单次点击即全选该元素内所有可选文本（适合展示代码片段、token、ID 等短标识符） -
contain：允许在该元素内开始并结束选中（防止选中“溢出”到兄弟元素），但兼容性较差（仅 Chrome 120+、Firefox 122+ 支持）
注意：auto 是默认值，行为取决于元素类型（如 <p> 默认可选，<div> 在某些 UA 下默认不可选）。
立即学习“前端免费学习笔记（深入）”；
如何稳妥地全局禁用文本选中
若目标是 UI 控件（如标签页、开关、图标旁文字）不被意外选中，推荐按作用域设置，而非暴力加在 body 上：
- 对整块交互区域：用类名统一控制，例如
.ui-control { user-select: none; } - 避免影响表单控件：显式重置
input, textarea, select { user-select: text; } - 兼容旧版 Safari/Chrome：可保留
-webkit-user-select: none，但非必需（2024 年后已基本可省略） - 不要依赖它做内容保护：用户仍可通过
getComputedStyle或直接查看 DOM 获取文本
.card-title, .tab-label, .icon-label {
user-select: none;
}
input, textarea, [contenteditable] {
user-select: text;
}
移动端双击放大与 user-select 的隐式冲突
在 iOS Safari 中，若一个块级元素（如 <div class="header">）同时满足：
– 未设置 user-select
– 内部纯文本且宽度窄于视口
– 无其他缩放限制（如 viewport 中未设 user-scalable=no）
则双击可能触发页面局部放大，而非文本选中。此时加上 user-select: none 反而能抑制该行为——但这属于副作用，不是设计本意。
真正需要防双击放大的场景，应优先检查 <meta name="viewport"> 配置，而非依赖 user-select。
