user-select: none仅阻止鼠标选中，非安全机制；失效主因是前缀缺失、表单元素强制忽略、子元素覆盖、优先级不足及移动端/无障碍兼容问题。
user-select: none 本身不防复制，只防鼠标选中——这是它最常被误用的起点。真要“防止恶意复制”，得先接受这个前提：前端没有真正可靠的防复制方案。
为什么 user-select: none 加了还被选中？
常见失效不是因为你写错了，而是没覆盖全或被覆盖了：
- 漏掉任一前缀：
-webkit-user-select: none（iOS Safari / Chrome 必须）、-moz-user-select: none（旧 Firefox）、-ms-user-select: none（IE/旧 Edge）；标准写法user-select: none必须放在最后，否则会被前缀规则覆盖 -
contenteditable="true"元素、<input>、<textarea></textarea>会无视该属性，浏览器强制允许选择 - 子元素显式设了
user-select: text（比如第三方组件、代码高亮库），直接覆盖父级继承值 - 样式优先级不够，被更高权重的选择器（如内联 style 或
!important）覆盖；建议用更具体的选择器，例如.article-body * { user-select: none; }
哪些地方必须重置为 user-select: text？
一旦你在容器上启用 user-select: none，所有子元素都会继承——包括不该锁死的交互区域：
-
input、textarea、select、button：否则用户无法聚焦、输入、拖动光标 -
[contenteditable="true"]和富文本编辑器宿主（如div[role="textbox"]） -
code、pre块：开发者需要复制示例代码，别一刀切 -
img、svg：顺带加上user-select: none，避免图片被拖拽选中干扰体验
移动端和无障碍的硬约束不能跳过
iOS Safari 对 user-select: none 支持不稳定，长按仍可能弹出“复制”菜单；而屏幕阅读器（如 VoiceOver）依赖文本可选性来朗读内容：
- 别给
body或整页加user-select: none，WCAG 明确要求关键文本需保持可访问性 - 错误提示、操作指引、表单说明等文本，优先保留在可选范围内
- 若内容含水印、版权标识等非核心信息，可用
user-select: none精准作用于#copyright-line或.watermark这类特定容器 - 真要强保护，应评估是否该用服务端渲染 + 动态水印 + 权限控制替代纯前端“防复制”
真正容易被忽略的点是：你拦得住鼠标，拦不住键盘快捷键、右键菜单、DevTools 查看 DOM、甚至截图 OCR。所谓“防复制”，本质是抬高普通用户的操作门槛，而非构建安全边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
