iOS Safari 中 user-select: none 无效，需组合 -webkit-touch-callout: none、前缀属性及 min-height: 1em 才生效；input/textarea/contenteditable 元素无法通过 CSS 禁用选中。
直接写 user-select: none 在 iOS 上大概率无效，不是你漏写了属性，而是 Safari 对该样式有严格生效前提——必须组合前缀、作用于具体元素、并满足布局与语义条件。
为什么加了 user-select: none 还是能长按选中
iOS Safari 把「文本高亮」和「系统菜单弹出」拆成两个独立行为：user-select: none 只影响前者；后者由 -webkit-touch-callout: none 控制。只设一个，另一件事照常发生。
-
-webkit-touch-callout: none必须显式声明，且要放在 CSS 声明块最前面，否则某些 WebView 会忽略 - 空容器、未设
min-height或width的元素，iOS 可能直接跳过该样式解析 -
pointer-events: none会覆盖user-select，两者不能共存 - 样式没落到实际文本节点父级（比如只写在
.card上，但内部<p>没加类），照样可选
真正生效的最小 CSS 组合
这个写法覆盖 iOS Safari、微信 X5、Android Chrome 和桌面触控设备：
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 1em;
}-
-webkit-touch-callout: none是 iOS 禁菜单的关键，缺它等于白写 - 前缀顺序不能乱：
-webkit-必须早于标准user-select，否则旧版 Safari 读不到 -
min-height: 1em是 iOS 的隐性触发条件，空 div 即使加了样式也不响应 - 别用
* { ... }全局重置——<input>和<textarea>会失去光标定位能力
哪些地方加了也白加，还可能坏事
浏览器对某些元素做了硬性保护，CSS 无法覆盖：
立即学习“前端免费学习笔记（深入）”；
-
<input type="text">、<textarea>：焦点态下必然可选，强行加会干扰输入法和光标位置 -
[contenteditable="true"]：编辑能力优先级高于 CSS，禁用后富文本光标失灵 -
<img>的alt文本：iOS 长按时仍可高亮，得设alt=""或改用背景图 - 带
tabindex="0"或role="button"的容器：Android Chrome 可能允许双击选中
若真需控制输入区域，应在 focus 时移除 no-select 类，blur 后恢复；或用 readonly + pointer-events: none 模拟只读态。
微信/钉钉等定制 WebView 怎么办
它们内核对 CSS 支持不稳定，-webkit-touch-callout 常被无视，此时 JS 是唯一兜底手段：
- 监听
selectstart并e.preventDefault()—— 仅对桌面和部分 Android 有效 - iOS 必须配合
touchstart：element.addEventListener('touchstart', e => e.preventDefault()) - 但注意：
touchstart.preventDefault()会同时禁掉滚动，所以只应在明确非滚动区使用 - 更安全的做法是：用
touch-action: manipulation替代粗暴拦截，它只禁长按菜单，不碰滚动
真正容易被忽略的是语义层判断——不是“能不能禁”，而是“该不该禁”。按钮文案禁掉没问题，但侧边栏菜单项禁了，用户就无法复制反馈问题。防误触不等于防文本，touch-action: manipulation 往往比盲目禁选更轻量、更安全。
