移动端文本误选是浏览器默认行为，需同时声明-webkit-、-moz-、-ms-及标准user-select: none才生效；表单元素、伪元素和contenteditable需单独处理；ios还需-webkit-touch-callout: none禁用长按菜单。
移动端UI组件里文本被意外选中，根本不是用户手滑
这不是交互设计问题，是浏览器默认行为——iOS Safari 和安卓 WebView 会把任何可聚焦、有文本的区域当成“潜在可选目标”，双击/长按直接触发高亮或系统菜单。UI 组件（比如按钮、标签页、图标旁文案）一旦没显式禁用，就可能在滚动、点击间隙被误触选中，打断操作流。
只写 user-select: none 在 iOS ≤16.4 和微信安卓 X5 内核里等于没写
这些环境根本不读标准属性，必须同时声明四个前缀：
-
-webkit-user-select: none：iOS Safari、Chrome for Android、微信/QQ 内置浏览器的生效主通道 -
-moz-user-select: none：Firefox for Android ≤115 仍依赖它 -
-ms-user-select: none：旧 EdgeHTML WebView（少量政企定制 App 还在跑） -
user-select: none：现代标准值，作为语义声明和未来兜底
顺序无关，但缺一不可；单独漏掉 -webkit-，iOS 上双击照样高亮。
input、textarea、伪元素和 contenteditable 不吃这套
这些元素的原生行为优先级高于 CSS，user-select: none 对它们无效：
- 给父容器加了
no-select类，子input依然能双击选中 → 必须单独对表单控件重置：input, textarea { user-select: text; } -
::before里插的文字不会继承user-select→ 要禁选，得作用于宿主元素本身，不是伪元素 -
contenteditable="true"完全无视该属性 → 真要保护某段文字，得用contenteditable="false"显式声明
禁选不等于禁菜单，-webkit-touch-callout: none 是 iOS 的最后一道闸
user-select: none 只管文本高亮，不管长按时弹出的“复制/翻译/分享”气泡。这个气泡由独立属性控制：
-
-webkit-touch-callout: none必须和 user-select 规则写在同一选择器里，仅 iOS 有效，Android 忽略但无害 - 不加它，哪怕所有前缀都齐了，iOS 长按照样弹菜单
- 微信安卓 X5 内核基本不认这个属性，得靠 JS 拦截
touchstart+preventDefault()，但仅限非输入区域，否则废掉滚动
真正难搞的不是代码怎么写，而是得确认那个元素在 iOS 渲染层里是不是被识别为“可选区域”——有时候删掉 tabindex="-1" 或加 min-height: 1em 反而让规则生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
