单独写 user-select: none 在 iOS Safari 上基本无效，必须搭配 -webkit-user-select: none 和 -webkit-touch-callout: none 才能真正阻止长按弹出“复制/搜索”菜单；前者禁用文本高亮，后者禁用系统级上下文菜单，二者缺一不可。
单独写 user-select: none 在 iOS Safari 上基本无效，必须搭配 -webkit-user-select: none 和 -webkit-touch-callout: none 才能真正阻止长按弹出“复制/搜索”菜单。
为什么 iOS 长按时仍弹菜单？
根本不是样式没生效，而是 iOS 把「文本高亮」和「系统级上下文菜单」拆成两套机制：user-select 只管前者，-webkit-touch-callout 才管后者。漏掉任一，菜单照弹。
-
-webkit-touch-callout: none仅对 iOS Safari 生效，Android Chrome 忽略它，所以不会破坏其他平台 - 即使加了所有前缀，若目标元素是空
<div>、没设 <code>min-height或被pointer-events: none拦截，iOS 会直接跳过该规则 - 双击或快速拖动时可能短暂闪现高亮框——这是 WebKit 渲染延迟，
::selection可用来压暗它，但不能替代主逻辑 -
<input type="text">、<textarea></textarea>：焦点态下必然可选，加了反而干扰光标定位和输入法 -
[contenteditable="true"]：富文本编辑器依赖可选性实现光标移动，禁用后输入法失灵、粘贴异常 -
<img alt="如何在CSS中禁用移动端网页的文本选中复制" >的alt文本：iOS 长按时仍可高亮，得设alt=""或改用背景图 - 带
tabindex="0"或role="button"的容器：Android Chrome 可能允许双击选中，与语义冲突 - 样式要落在直接包裹文字的元素上，比如
<p class="sensitive">ORD-7X9F2</p>，而不是<div class="card"><p>...</p></div> - 必须声明完整前缀组合：
-webkit-user-select: none（iOS/Safari 必需）、-moz-user-select: none、-ms-user-select: none、user-select: none - 加
min-height: 1em或line-height: 1.2等触发 layout，避免 iOS 因元素“不可交互”而跳过规则 - 移动端建议叠加
touch-action: manipulation，告诉浏览器这个区域只响应点击，降低误触发概率 -
<pre class="brush:php;toolbar:false;"></pre>和<code>无法复制示例代码，技术文档直接废掉 - 屏幕阅读器依赖文本可选性判断语义边界，WCAG 1.3.1 直接不达标
- React/Vue 中动态插入的 DOM 节点，样式继承后无法通过 props 覆盖
- 漏掉任意一类重置（比如忘了
[contenteditable="true"] { user-select: text; }），用户点进编辑器就卡死
哪些元素上加了也白加，甚至坏事？
user-select: none 在以下元素上会被浏览器强制忽略，还可能引发交互异常：
怎么写才真正生效？
必须同时满足三件事：作用到具体文本容器、写全前缀、补布局约束。不能只写在 body 或外层 wrapper 上。
立即学习“前端免费学习笔记（深入）”；
全局设 body { user-select: none } 的真实代价
看着省事，实际埋雷最深：所有后代元素都继承禁选，而你很难保证每个第三方组件、每段 v-html 插入的内容、每个 Shadow DOM 内部节点都做了正确重置。
真正难搞的从来不是写哪几行 CSS，而是得确认那个元素在 iOS 里是不是“被当成可选区域”——有时候删掉 tabindex="-1" 或加个 outline: 0 就灵了。
