user-select: none 仅禁鼠标拖选和双击，不阻止右键复制、ctrl+c或开发者工具取文；需全前缀+标准写法、作用于直接包裹文本的元素，并避开表单控件与可编辑元素。
user-select: none 本身不禁止复制，只禁止选中——这是最关键的误判点。用户仍可右键 → “复制”，Ctrl+C，或直接看源码、用开发者工具取文本。它唯一可靠拦截的，是鼠标拖选和双击选中这两条最常用路径。
为什么加了 user-select: none 还能选中？
不是没生效，而是被覆盖或绕过了：
-
-webkit-user-select、-moz-user-select、-ms-user-select缺一不可，尤其 iOS Safari 必须有-webkit-user-select: none，否则完全无效 - 目标元素是
<input>、<textarea></textarea>或带contenteditable="true"的元素——浏览器强制忽略该样式，这是规范行为 - 父级设了
user-select: none，但子元素（比如一个<p></p>或<span></span>）显式写了user-select: text，直接覆盖继承值 - 用了 Shadow DOM，外部样式默认不穿透，得在组件内部的
shadowRoot里单独声明
怎样让 user-select: none 真正起作用？
必须同时满足三个条件：写对、写全、写准位置：
- 写法必须按顺序：先写前缀，最后写标准属性，例如：
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;—— 顺序反了会被前缀规则覆盖 - 必须作用于「直接包裹文本的元素」，比如
<p class="no-select">文字</p>，而不是外层<div class="article"><p>文字</p></div>；user-select不会自动继承到子文本节点，只对自身内容生效 - 移动端需额外加
-webkit-touch-callout: none，否则 iOS 长按仍弹“复制/搜索”气泡菜单（Android 忽略此属性，不影响）
哪些地方绝对不能加，加了反而坏事？
全局或大范围滥用会直接破坏基础交互：
-
<input>、<textarea></textarea>、<select></select>、<button></button>、[contenteditable="true"]必须显式重置为user-select: text，否则光标无法定位、无法拖选已有内容、输入法异常 - 代码块（
<code>、<pre class="brush:php;toolbar:false;"></pre>）也得放行，否则示例代码根本没法复制 - 无障碍场景下，屏幕阅读器依赖文本可选性来朗读，整段正文加
none会让视障用户“看不见”内容 - React/Vue 中若用
dangerouslySetInnerHTML或富文本编辑器（如 Tiptap），class 必须绑定到实际渲染出的文本容器节点，不是 Fragment 或空 div
真正难的不是加这四行 CSS，而是判断哪一段文字「确实不该被选中」——比如价格标签、状态 badge、水印文案可以禁，但旁边那个「复制」按钮的文案，你得让它可选，否则用户连按钮都点不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
