仅靠user-select: none在ios上无效，因ios将文本高亮与长按菜单拆分为两个独立控制点，必须同时设置-webkit-touch-callout: none且作用于有尺寸/可交互的元素，否则仍弹出复制菜单。
为什么只写 user-select: none 在 iOS 上基本无效
因为 iOS Safari 把「能否高亮文本」和「是否弹出长按菜单」拆成了两个独立控制点。user-select: none 只影响前者，而后者由 -webkit-touch-callout: none 控制。两者必须同时作用于同一元素，否则长按时仍会呼出“复制/搜索”气泡菜单。
更关键的是，iOS 要求目标元素满足「可交互性」或「有明确渲染尺寸」才能响应这些 CSS 属性。空 <div>、未设 <code>min-height、被 pointer-events: none 拦截的区域，都会让样式静默失效。
- 必须给目标元素加
min-height: 1em或显式height/width - 避免与
pointer-events: none同时使用 - 不要只写在父容器上——
user-select不继承，得落到实际含文本的元素（比如p、span）
user-select: all 和 user-select: text 的真实用途差异
user-select: all 不是“允许复制”，而是“点击即全选”。用户点一下整个块就被高亮，再按 Ctrl+C 或 Cmd+C 就能复制——适合文档标题、代码片段这类需要整段搬运的场景。
user-select: text 才是常规可选状态，支持拖拽、双击、三击等原生选择行为，也是输入框、按钮文案等交互元素的默认值。
-
user-select: all必须配全前缀：-webkit-user-select: all、-moz-user-select: all等 - 在移动端，
all值对长按菜单无影响，该弹还是弹；真正抑制菜单还得靠-webkit-touch-callout: none - 别对
<input>或contenteditable="true"强行设all——编辑逻辑会冲突
微信安卓 X5 内核下必须补 JS 拦截
腾讯 X5 内核对 user-select 和 -webkit-touch-callout 支持极差，CSS 几乎形同虚设。此时只能靠 JavaScript 拦截 touchstart 事件来阻止高亮触发，但要注意边界：
- 只绑定到明确不需要长按交互的元素，例如卡片标题、版权文字、图标旁说明文案
- 排除表单控件：
if (e.target.matches('input, textarea, select, [contenteditable]')) return - 用
e.preventDefault()，但别对body全局监听——否则滚动会卡顿甚至失灵 - 这个 JS 方案只防高亮，不防系统菜单；要禁菜单，仍得靠 CSS + 原生 WebView 配置（如 APP 侧关闭 X5 的文本选择开关）
伪元素、Shadow DOM 和第三方组件里的常见漏点
::before 和 ::after 生成的内容不参与文本选择流程，给它们直接写 user-select: none 完全没用。必须作用于其宿主元素，比如 .watermark { user-select: none; }。
Shadow DOM 外部样式默认不穿透，Web Components（如 Lit、Stencil 组件）内部的文本需在 shadow root 里单独声明 user-select 规则。
第三方 UI 库（Ant Design、Element Plus、Vant）常在按钮、提示框等子元素里显式设了 user-select: text，会直接覆盖你父级的 none 设置。这时候得用更高权重的选择器，或者改用 .no-select * { user-select: none !important; }（仅当别无他法时）。
真正难搞的从来不是写哪几行 CSS，而是得确认那个文字节点，在当前设备、当前 WebView、当前嵌套层级下，到底有没有被浏览器当成「一个可选区域」——有时候删掉 tabindex="-1" 或加个 outline: 0，反而就生效了。
