根本原因是user-select: none仅抑制拖拽高亮，不阻止ios系统级长按触发的“复制/搜索”菜单；必须叠加-webkit-user-select: none和-webkit-touch-callout: none才有效。
移动端 user-select: none 为什么加了还弹出“复制”菜单
根本原因不是 CSS 写错了，而是 iOS Safari 和部分 Android WebView 对 user-select: none 的响应不完整——它只抑制拖拽高亮，但不阻止系统级长按触发的上下文菜单。光靠标准属性完全无效。
- 必须补全
-webkit-user-select: none，这是 iOS Safari（包括 15.4 之前所有版本）唯一认的规则 - 单独写
user-select: none在 iOS 上等于没写，开发者工具里 Computed 值会显示为auto或未定义 - 即使样式生效，长按仍可能短暂闪现高亮框，接着弹出“复制/搜索”菜单——这是 WebKit 渲染管线延迟 + 系统策略干预，CSS 无法覆盖
- 解决办法是叠加
touch-action: manipulation，告诉浏览器“这个区域只响应点击，别当文本处理”，能显著降低菜单误触发概率
哪些元素必须显式重置为 user-select: text
一旦你在根容器（比如 .app 或 body）上设了 user-select: none，所有子元素都会继承，包括那些本该支持文本操作的控件——这不是 bug，是 CSS 继承机制的必然结果。
-
input、textarea、select、button必须单独重置：input, textarea, select, button { user-select: text; } -
[contenteditable="true"]同样要显式设为text，否则富文本编辑器光标定位失败、输入法异常 - 自定义组件如
div[role="textbox"]或第三方编辑器（Tiptap、Slate）内部 DOM 需在组件内声明，外部样式穿透不了 Shadow DOM - 漏掉任意一类，用户就会遇到：点进输入框没光标、双击选词失效、语音输入时文本无法聚焦
全局设置 body { user-select: none } 的真实代价
看似省事，实则埋雷。它会让所有后代元素默认禁选，而你很难保证每个第三方组件、每段内联 HTML、每个动态插入的 DOM 节点都做了正确重置。
-
<pre class="brush:php;toolbar:false;"></pre>代码块无法复制，技术文档页面直接失去实用性 - 屏幕阅读器依赖文本可选性判断语义边界，盲目禁用会导致朗读跳过或顺序错乱（WCAG 1.3.1 违反）
- React/Vue 中若某个子组件用
v-html或dangerouslySetInnerHTML插入内容，样式继承后无法通过 props 控制 - 调试时右键“复制文本”失效，控制台打印的 DOM 节点变成纯视觉块，排查问题多绕两步
真正防误触的关键不在 user-select，而在 touch-action 和结构隔离
用户在移动端“意外选中”，本质是点击区域和文本容器耦合太紧。单纯禁选只是掩耳盗铃，容易破坏基础交互。
- 对纯展示文案（如卡片 ID、状态标签），用精确 class 如
.card-id单独设user-select: none，而不是包裹整个卡片 - 按钮文字禁选没问题，但必须确保其父容器没同时设
pointer-events: none，否则 click 事件就丢了 - 图标+文字组合场景（如带 icon 的 tab 标签），把文字层和图标层拆开：文字用
span设user-select: none，图标用伪元素或独立svg，避免点击热区错位 - 最易被忽略的是：禁选后仍需保留键盘导航能力（
tabindex）、焦点样式（:focus-visible）和屏幕阅读器支持（aria-label），否则残障用户直接卡死
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
