user-select: none 并非万能开关，常因缺失前缀、被覆盖、作用于可编辑元素、未落到直系容器或移动端限制而失效，需综合前缀、作用域、重置表单及框架适配等多重处理。
user-select: none 不是加了就生效的开关，尤其在移动端、表单元素或 Shadow DOM 中，它常被忽略或覆盖。必须配合前缀、作用域控制和边界条件处理，否则白写。
为什么直接写 user-select: none 经常无效
常见现象：样式加了，但 iOS 长按仍弹“复制”， 双击照样选中，Vue 切换 class 后没反应。
- 缺关键前缀：
-webkit-user-select: none在 Safari/iOS 是刚需，只写标准语法会失效 - 被更高优先级规则覆盖：比如某个
.form-input里写了user-select: text，就会盖掉父级的none - 目标元素本身可编辑：
<input>、<textarea>、contenteditable="true"元素强制启用选中，CSS 无法干预 - 作用域错位：写在
body或 wrapper 上，但实际文本在子<span>里——该属性不继承，必须落到具体文本容器上
移动端（尤其是 iOS Safari）必须满足的三个前提
iOS Safari 对 user-select: none 的生效有隐式要求，光写样式不够。
- 元素必须有明确尺寸或内容：空
<div>、未设min-height或line-height的容器大概率被忽略 - 不能同时设
pointer-events: none：它会切断浏览器对交互区域的识别，导致user-select失效 - 必须作用于文本直系父容器：比如文字在
<p><span>状态</span></p>里，只给p加无效，得给span或用.no-select * { user-select: none; }
如何安全地禁用一段区域的所有文本选中
想让整个卡片、弹窗或标签页不可选，不能只靠一层样式——用户双击子节点（如 <span>、<label>）时，若这些节点没显式声明，就会恢复默认可选。
立即学习“前端免费学习笔记（深入）”；
- 推荐递归写法（慎用于深层 DOM）：
.no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .no-select * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - 更稳妥做法：显式列出常用文本容器：
p, span, li, dt, dd, label, .title, .chip-text，避免通配符性能损耗 - 全局禁用后必须重置表单控件：
input, textarea, [contenteditable] { user-select: text !important; }缺!important会被通配符覆盖
React/Vue 中动态切换的典型坑
框架里用 className 或内联样式切换时，容易漏掉前缀或作用域问题。
- Vue scoped style 默认不穿透子组件，
.no-select类不会影响<child-component>内的文本，需用:deep(.no-select)或全局 class - React 中用
style={{ userSelect: 'none' }}，SSR 渲染时可能被忽略，建议补全局 class 而非纯内联 - 用
v-show切换类名无效：它只是display: none，DOM 还在，样式未移除；换成v-if或确保响应式数据真实变化（比如用ref而非普通对象属性）
真正难搞的不是写哪几行 CSS，而是得确认那个元素在 iOS 里是否被浏览器“当成可选区域”——有时候加个 outline: 0、删掉 tabindex="-1"，或者给父容器加 min-height: 1em，反而就灵了。
