<p>Safari ≤16.4 不支持标准 user-select: none，必须显式声明 -webkit-user-select: none 且置于最前，同时补全 -moz-、-ms- 前缀及标准写法，并注意元素尺寸、pointer-events、继承性及 iOS 的 -webkit-touch-callout 控制。</p>
为什么Safari里user-select: none完全没反应
因为 Safari ≤16.4（包括 iOS 16.4 及更早）压根不识别 user-select: none 标准语法，只认 -webkit-user-select: none。你写了标准属性却没写前缀，等于白写。
常见错误现象：开发者工具里看到样式已加载，但文字照常可拖选、双击高亮；或者只在 macOS Safari 上失效，iOS 上反而“看起来有效”（其实是碰巧触发了其他机制）。
-
-webkit-user-select: none必须显式声明，且要放在所有 user-select 声明的最前面 - 漏掉
-moz-user-select: none会导致 Firefox for Android 或旧版桌面 Firefox 失效 - 如果用了构建工具（如 PostCSS autoprefixer），确认它没把
-webkit-前缀删掉——某些配置会默认裁剪过时前缀 - 别用
* { user-select: none; }全局覆盖，Safari 对伪元素、::before/::after里的文本不继承该规则，还得单独设
必须写的四行声明顺序不能错
浏览器解析 CSS 是从上到下匹配并覆盖，只认自己支持的那条。Safari 15.2 会跳过 user-select: none（不认识），但能解析 -webkit-user-select: none；如果标准写法写在前面，后面又没加前缀，就等于没设防。
-
-webkit-user-select: none;—— Safari、iOS、Chrome ≤61、Edge Legacy 的唯一入口 -
-moz-user-select: none;—— Firefox for Android 和 Firefox ≤68 必须项 -
-ms-user-select: none;—— 旧 Windows Mobile WebView 或 Electron 旧内核可能依赖 -
user-select: none;—— 放最后，供现代 Chrome/Firefox/Edge 使用，避免被前缀规则意外覆盖
示例正确写法：
.no-select {<br> -webkit-user-select: none;<br> -moz-user-select: none;<br> -ms-user-select: none;<br> user-select: none;<br>}
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
写了前缀还是无效？检查这些隐藏条件
Safari 对 -webkit-user-select: none 生效有隐含前提：元素得是“可交互的”或“有明确尺寸/内容”。空容器、未设宽高的 div、纯透明背景、或被 pointer-events: none 拦截的区域，都会让该样式被忽略。
- 确保目标元素有
min-height: 1em或至少一个非空白字符（比如加个 - 避免同时设置
pointer-events: none—— 它会覆盖user-select行为，且导致点击失效 - 不要只给父容器加 class，而让子元素（如
span、p）靠继承——user-select不继承，必须落到具体承载文本的元素上 - 若用 React/Vue 动态切换 class，确认 DOM 确实重绘了；富文本组件（如 Tiptap）可能缓存样式，需强制
key更新
iOS Safari 长按仍弹菜单？那是另一层控制
即使 -webkit-user-select: none 生效了，iOS Safari 长按时仍可能弹出“复制/翻译”气泡菜单——因为这是由 -webkit-touch-callout: none 控制的，和文本选中是两个独立开关。
-
-webkit-touch-callout: none必须和-webkit-user-select: none写在同一元素上，且建议放在第一行（某些 iOS WebView 会忽略非首行声明） - 它只对 iOS Safari 有效，Android Chrome 完全无视，别指望靠它解决安卓问题
- 如果目标是按钮或卡片标题这类纯展示元素，加
touch-action: manipulation更轻量，还能避免误触滚动 - 微信安卓 X5 内核基本不认这两个 CSS 属性，必须补 JS：
element.addEventListener('touchstart', e => e.preventDefault(), { passive: false })，但仅限非表单区域
真正容易被忽略的是：禁用选择不是目的，判断“这里用户是否需要复制”才是关键。按钮上的状态文案可以禁，但侧边栏菜单项如果也禁了，反馈问题时用户连复制名称都做不到。
