加了 user-select: none 仍能双击选中，因 ios safari 和旧版 android webview 只识别 -webkit-user-select: none；必须同时声明 -webkit-、-moz-、-ms- 前缀及标准值，并单独处理 input、伪元素和 -webkit-touch-callout: none 才能生效。
为什么加了 user-select: none 还是能双击选中？
因为移动端（尤其是 iOS Safari 和旧版 Android WebView）根本不认标准属性，只响应 -webkit-user-select: none。它不是“兼容性补丁”，而是当前（2026 年）仍被强制依赖的生效通道。单独写 user-select: none 在 iOS ≤16.4、微信内置浏览器、部分安卓定制 WebView 中完全无效——双击照样高亮，长按照样弹出“复制/搜索”菜单。
必须写的四个前缀及其作用场景
缺一不可，且顺序无关紧要，但建议统一放在类定义开头：
-
-webkit-user-select: none：iOS Safari、Chrome for Android、微信/QQ 内置浏览器的主通道，不写等于没禁 -
-moz-user-select: none：Firefox for Android 旧版本（≤115）仍需此声明，新版虽支持无前缀，但存量不可忽视 -
-ms-user-select: none：已基本淘汰，但仍有少量 Windows 10 Mobile 或旧 EdgeHTML WebView 在跑，留着零成本 -
user-select: none：现代标准值，作为兜底和语义声明，不能省
示例最小可用样式块：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
为什么加了所有前缀，<input> 里文字还是能选？
这不是前缀问题，是浏览器行为优先级问题：<input>、<textarea></textarea>、contenteditable="true" 的原生编辑逻辑高于 CSS 控制。即使你给父容器写了全套前缀，子元素只要没显式覆盖，就会恢复默认 user-select: text。
- 表单控件必须单独设
user-select: text !important（防止父级none错误穿透） - 若真不想让用户选，应改用
readonly属性或pointer-events: none（注意：后者会禁用所有事件） - 伪元素（如
::before）生成的内容不继承user-select，需单独加前缀声明 - Shadow DOM 内部样式不会被外部类穿透，必须在 shadow root 里重新定义
还漏了最关键的防菜单弹出属性
user-select: none 只管文本高亮和光标，不管系统菜单。iOS 长按时那个“复制/翻译/分享”气泡，靠的是另一个独立属性：-webkit-touch-callout: none。
- 这个属性只对 iOS Safari 有效，Android 忽略，但加了无害
- 它和
user-select是互补关系，缺一不可；只加前者，菜单照弹 - 推荐组合使用：
.prevent-longpress { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } - 如果区域还涉及拖拽滚动，可追加
touch-action: pan-y避免误触发长按识别
真正容易被忽略的点是：没有“一次写全就万事大吉”的写法。每个目标元素都得自己扛前缀，表单控件要单独处理，伪元素要额外声明，iOS 菜单还得靠另一个属性关——漏掉任意一环，用户手指一按，高亮和菜单就回来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
