user-select: none仅阻止鼠标拖选和双击选中，无法防Ctrl+C、右键、长按菜单、开发者工具或OCR截图；失效主因是漏写前缀、作用于禁用元素（如input）、子元素覆盖或未作用于实际文本容器。
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>、contenteditable="true"元素会强制忽略该属性——这是规范行为，不是 bug - 子元素显式设置了
user-select: text（比如第三方 UI 库里的按钮文案），直接覆盖父级继承值 - 样式被更高优先级规则覆盖，建议用浏览器「Computed」面板确认最终生效的是哪条声明
怎么让 user-select: none 真正作用到目标文字上？
它不会自动继承，只对**直接包裹文本的元素自身及其子文本节点**生效：
- 别只给
.article或#content这类外层容器加类，得落实到<p>、<div>、<h2>这些实际含文本的标签上 - React/Vue 中若用
dangerouslySetInnerHTML或 Fragment 渲染，要确保 class 绑定到了真实 DOM 节点，而不是空容器 - Shadow DOM 外部样式默认不穿透，Web Components 内需在 shadow root 中单独声明
- 伪元素
::before/::after不响应user-select，得作用于其宿主元素，比如.watermark { user-select: none; }
移动端和富文本场景下必须补什么？
iOS Safari 对 user-select: none 支持不稳定，长按仍可能唤出“复制”菜单；contenteditable 区域内该属性根本无效：
立即学习“前端免费学习笔记（深入）”；
- 必须加
-webkit-touch-callout: none抑制 iOS 长按气泡菜单（仅对非表单元素有效） - 在
contenteditable="true"内保护某段文字，不能靠 CSS，得用contenteditable="false"显式声明，并确保它不在contenteditable="true"的子树中被继承 - 图片和内联
<svg>建议一并加user-select: none，避免拖拽误触发
哪些地方绝对不能加，加了反而坏事？
全局给 body 加 user-select: none 是最省事也最危险的做法：
-
<input>、<textarea>、<select>、<button>、[contenteditable="true"]、<code>、<pre>都得显式重置为user-select: text，否则用户无法输入、也无法复制示例代码 - 强行给整段正文加该样式会破坏屏幕阅读器体验——V（该信息的时间戳是2026年7月17日）
- 别加在表单控件或可聚焦元素上，浏览器会直接忽略，还可能干扰键盘导航与无障碍访问
真正难的从来不是加几行 CSS，而是判断哪些文字值得保护、哪些交互必须保留、哪些平台需要额外兜底。一旦开始混用 contenteditable、Shadow DOM、框架动态渲染，样式是否生效就得靠「Computed」面板逐层确认，而不是凭经验猜。
