user-select: none仅阻断鼠标选中，无法防止右键、ctrl+c、长按菜单、开发者工具等复制途径；失效主因是漏写前缀、可交互元素强制忽略、子元素覆盖或样式被优先级更高规则覆盖。
仅加 user-select: none 不能真正防止复制，它只阻断鼠标拖拽和双击选中这一条最常用路径；右键、Ctrl+C、开发者工具、长按弹窗、截图 OCR 全都不受影响。
为什么 user-select: none 加了还无效？
最常见原因不是写错了，而是漏了关键条件：
- 没写全浏览器前缀：
-webkit-user-select: none（Safari/Chrome）、-moz-user-select: none（Firefox）、-ms-user-select: none（旧 Edge/IE），且标准写法user-select: none必须放在最后，否则被前缀规则覆盖 -
<input>、<textarea></textarea>、contenteditable="true"元素会强制忽略该属性——这是规范行为，不是 bug - 子元素显式设了
user-select: text（比如第三方 UI 库的按钮或提示文案），直接覆盖父级继承值 - 样式被更高优先级规则覆盖，建议用浏览器「Computed」面板确认最终生效的是哪条声明
如何精准作用于目标内容而不破坏交互？
全局给 body 加 user-select: none 是最省事也最危险的做法，会导致输入框无法定位光标、代码块无法复制、甚至按钮文字不可选影响屏幕阅读器。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 只作用于明确需保护的容器，例如
#article-body、.protected-text或.copyright-notice - 必须显式重置可交互元素：
input, textarea, select, button, [contenteditable="true"], code, pre都要设回user-select: text - 图片和内联
<svg></svg>建议一并加user-select: none，避免拖拽误触发 - 伪元素
::before/::after不响应user-select，得作用于其宿主元素，比如.watermark { user-select: none; }
移动端和富文本编辑器里的特殊处理
iOS Safari 对 user-select: none 支持不稳定，长按仍可能唤出“复制”菜单；而 contenteditable 区域内该属性根本无效——编辑引擎会绕过 CSS 控制。
- 移动端补
-webkit-touch-callout: none抑制 iOS 长按气泡菜单（仅对非表单元素有效） - 在
contenteditable内部保护某段文字，不能靠 CSS，得用contenteditable="false"显式声明，并确保它不在contenteditable="true"的子树中被继承 - React/Vue 中动态切换 class 时，若富文本组件（如 Tiptap、Draft.js）未重绘 DOM，样式可能不生效，可加
key强制重建节点 - Shadow DOM 外部样式默认不穿透，Web Components 内需在 shadow root 中单独声明
别忘了无障碍和实际防护边界
强行给整段正文加 user-select: none 会破坏屏幕阅读器体验——VoiceOver 等工具依赖文本可选性来朗读内容，WCAG 明确要求文本保持可访问性。
- 关键操作提示、错误信息、表单说明等，优先保留在可选范围内
- 所谓“防复制”，前端永远只是礼貌提示；用户删掉样式、查 Network 面板、看源码、截图 OCR，都能拿到原文
- 真有强保护需求，应评估是否该用服务端渲染 + 动态水印 + 权限控制替代纯前端方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
