user-select: none 在 ios/android 双击仍可选中，因其仅禁用拖拽选中，不阻止系统级长按/双击行为；需同时写 -webkit-user-select: none 等前缀才生效，且表单元素、伪元素、contenteditable 等场景需额外处理。
为什么 user-select: none 在 iOS 或 Android 上双击还能选中？
因为移动端对文本选择的触发逻辑更敏感，尤其 iOS Safari 会把双击、长按默认映射为“选中+呼出菜单”，而 user-select: none 单独存在时，可能被浏览器的原生行为覆盖或绕过。它只控制“是否允许通过鼠标/触摸拖拽选中”，不自动禁用长按弹窗、不阻止 ::selection 样式生效，也不影响伪元素内容的可选性。
-webkit-user-select: none 必须和 user-select: none 同时写吗？
是的，必须同时写。当前（2026 年）主流移动端浏览器仍依赖前缀兜底：
- iOS Safari ≤16.4 和部分 Android WebView 仍需
-webkit-user-select: none才真正禁用长按选中 - Firefox for Android 需要
-moz-user-select: none（虽已支持无前缀，但旧版本存量不可忽视） - 旧版 EdgeHTML（如 Windows 10 Mobile）仍依赖
-ms-user-select: none - 仅写
user-select: none会导致 iOS 上双击文字仍高亮、Android 上长按弹出“复制/搜索”菜单
为什么加了所有前缀，<input> 或 <span></span> 里文字还是能选？
两个核心原因：作用域没打中 + 表单控件有强制行为优先级：
-
user-select不继承，父元素设了none，子<span></span>或<p></p>若没显式声明，就恢复默认text -
<input>、<textarea></textarea>、<select></select>的原生选中逻辑高于 CSS，即使加了user-select: none，光标仍可定位、文字仍可双击选中（除非加readonly或pointer-events: none） - 伪元素（如
::before）的内容不参与 DOM 选择，但宿主元素若未设user-select: none，其包裹的文本仍可被连带选中 - 富文本容器（如
contenteditable="true"）完全无视user-select，必须靠 JS 拦截selectstart事件
移动端真要“彻底禁选”，还得补什么？
纯 CSS 无法 100% 覆盖所有移动端选中路径，得组合防御：
- 加
-webkit-touch-callout: none：干掉 iOS 长按时弹出的“复制/翻译/分享”气泡 - 对关键区域加
onselectstart="return false"内联属性（注意：仅对非表单元素有效，且需{ capture: true }绑定才可靠） - 对
<input>类元素，单独设user-select: text !important（防止父级none错误穿透），再配合readonly或unselectable="on" - 避免用
* { user-select: none }全局重置——性能差，且会干扰开发者调试时复制 console 报错信息
最常被忽略的一点：你写的样式可能根本没生效。检查 computed styles 确认 user-select 是否被更高权重规则覆盖，比如某个框架组件的 !important 规则，或者 inline style 直接写了 user-select: text。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
