user-select: none 仅阻止鼠标选中，不能真正禁用复制；需加全浏览器前缀、避开表单元素、精准作用于容器并重置可交互元素样式，且无法防御开发者工具等绕过手段。
user-select: none 本身不能禁用复制，它只阻止鼠标拖拽选中和双击选中——这是最常被误解的一点。真正想“禁止复制”，前端 CSS 没有可靠手段；但若目标是「阻断最常见的人工选中路径」，user-select 是必要且有效的第一步。
为什么写了 user-select: none 还能选中？
不是语法写错，而是漏了关键条件：
- 没加浏览器前缀：
-webkit-user-select: none（Safari/iOS 必须）、-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」面板确认最终生效的是哪条声明
如何安全地作用于真实 DOM 结构？
别直接给 body 加，否则输入框光标定位失败、代码块无法复制、屏幕阅读器体验受损。要精准控制：
- 只加在明确需保护的容器上，例如
#article-content、.copyright-notice或.protected-text - 必须显式重置可交互元素：
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 区域内该属性根本无效。
立即学习“前端免费学习笔记（深入）”；
- 补
-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 中单独声明
真正要杜绝复制，靠前端永远不保险——敏感内容该后端控制、该服务端渲染就别塞进 HTML 文本里。最容易被忽略的，是把 user-select: none 当成安全边界，而忘了用户还能通过开发者工具看 DOM、执行 document.body.innerText、甚至直接查网络请求。
