-webkit-user-select: none 在 ios safari 的 input、textarea、contenteditable 元素及 img 的 alt 文本上无效，因系统级行为优先级高于 css；需组合 user-select 各前缀声明并作用于具体节点，输入场景应避免强行禁用而改用逻辑层控制。
在移动端 CSS 中，-webkit-user-select: none 确实能阻止长按触发文字选中，但它不是万能的——尤其在 iOS Safari 上，它对 <input>、<textarea></textarea> 和可聚焦元素默认无效，且可能干扰原生长按菜单（如“复制”“搜索”）。
为什么 -webkit-user-select: none 在某些元素上不生效
iOS Safari 对表单控件和可交互元素做了硬性保护，即使显式设置 -webkit-user-select: none，长按时仍会唤起选词光标或上下文菜单。这不是 bug，而是系统级行为优先级高于 CSS。
-
<input type="text">、<textarea></textarea>：CSS 选中控制被忽略，焦点态下必然可选 - 设置了
contenteditable="true"的元素：同理，编辑能力覆盖 CSS 策略 - 未加
user-select: none的父容器内嵌文本节点：子元素继承失效，需单独设置
真正生效的写法与必要补充
仅靠 -webkit-user-select: none 不够，必须组合标准属性并作用于具体目标节点：
.no-select {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
- 必须同时声明
user-select: none（现代浏览器标准）和各前缀版本，否则 Android Chrome 100+ 或新版 Safari 可能回退到默认行为 - 不能只写在父容器上，例如
.card { ... }，而内部<p>正文</p>未加类——文本节点仍可被独立长按选中 - 对按钮、卡片标题等纯展示文本，直接加 class 最稳妥；对动态渲染内容，建议用 CSS 属性选择器批量控制：
[data-role="label"] { user-select: none; }
遇到输入框/可编辑区域时的替代方案
若目标是「禁用选中但保留输入功能」，不要强行覆盖 user-select，而应接受系统行为，并从交互逻辑层处理：
- 输入场景下，用户长按本就是为选词或粘贴，强行禁用反而降低可用性
- 若为防止误操作，可在
focus时临时移除该元素上的user-select: none，失焦后恢复 - 更彻底的做法：用
pointer-events: none配合input的readonly属性模拟只读展示态，再用 JS 拦截contextmenu事件阻止长按菜单
最常被忽略的一点：iOS 上 -webkit-user-select: none 对 <img> 标签内的 alt 文本无效，长按时仍可能高亮——此时需把 alt 改为空字符串或改用背景图方式呈现文案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
