user-select: none 仅禁用鼠标/触摸选中，非真正防护；需加-webkit等前缀、避免被覆盖、表单元素无效、移动端需preventDefault，且不防爬虫或DevTools。
user-select: none 不能真正“禁止选择文本”，它只是告诉浏览器“别响应鼠标/手指的选中动作”。加了这行样式，Ctrl+A、双击、拖拽确实不生效，但里照样能选，iOS长按仍弹“复制”，DevTools里照抄照搬——它不是锁，是遮罩。
为什么 user-select: none 经常没反应
常见错误现象：class="no-select"写了，但文字还是能被双击选中；Vue里切换class后无效；移动端一点就弹菜单。
- 缺关键前缀：
-webkit-user-select: none在 Safari/iOS 必须写，漏了就白搭 - 被更高优先级覆盖：比如某个
.form-input规则里写了user-select: text，直接盖掉父级的none - 目标是表单控件：
<input>、<textarea>、contenteditable="true"元素会无视user-select，这是浏览器强制行为 - 用在 Shadow DOM 外部：样式不会穿透；Web Components 内必须在 shadow root 里单独声明
怎么让 user-select 真正起效（含表单与移动端）
单纯写 user-select: none 只对普通块元素有效。要覆盖更多场景，得组合策略：
- 对非表单区域：显式写全前缀，例如
.protected { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - 对只读展示型
<input>：仅靠user-select无效，得加pointer-events: none（注意：这会让 focus 失效；更稳妥的是换成<div contenteditable="false">+user-select: none） - 移动端补漏：iOS Safari 对
selectstart事件基本不触发，建议在目标元素上加ontouchstart="event.preventDefault()"（仅限非交互区，别加在按钮或输入框上） - React/Vue 中动态控制：避免用
v-show或display: none切换，改用v-if或给容器加key={isProtected.toString()}强制重渲染
别把它当安全措施用
user-select 不防爬虫、不防截图、不防 DevTools 查看源码，document.querySelector('.secret').textContent 依然能拿到全部内容。
- 它只影响用户交互层，和
disabled属性一样，纯属 UI 层面的提示 - 全局加在
<body>上会破坏可访问性：屏幕阅读器可能跳过文字，键盘Tab导航失效 - 真要保护敏感内容，必须服务端鉴权 + 动态加载 + 权限校验；前端做的所有“禁选”“禁右键”都只是降低普通用户的操作门槛
最容易被忽略的一点：加了 user-select: none 后，记得检查键盘焦点是否还能进入该区域。如果用了 pointer-events: none，tabindex 和 role 得同步补上，否则残障用户会完全“看不见”这段内容。
