safari中user-select必须用-webkit-user-select前缀才生效，标准属性被完全忽略；需按“前缀优先”顺序书写，且contain/element值不支持。
user-select 在 Safari 中不加 -webkit-user-select 就无效
因为 Safari（包括所有基于 WebKit 的浏览器）至今未实现标准的 user-select，它只识别带 -webkit- 前缀的版本。这不是“兼容性补丁”，而是当前事实上的唯一可用语法——标准属性在 Safari 中被完全忽略，连 initial 或 none 都不生效。
哪些值必须用 -webkit- 前缀写法
即使你只写 user-select: none，Safari 也会当它不存在。必须显式写出：
-
-webkit-user-select: none（禁用选择） -
-webkit-user-select: text（仅文本可选，等价于标准text） -
-webkit-user-select: all（整块元素单次点击全选） -
-webkit-user-select: auto（由浏览器决定，等价于标准auto）
注意：contain 和 element 这两个标准值，Safari 目前根本不支持，加了前缀也无效。
为什么不能只靠 autoprefixer 自动补全
Autoprefixer 默认只处理已进入候选推荐标准（CR）或广泛实现的属性，而 user-select 虽然在 CSS UI Level 4 中定义，但 Safari 仍停留在旧实现阶段。实测 autoprefixer@10.4.18 不会为 user-select 插入 -webkit- 前缀——它认为该属性“已足够稳定”。所以你必须手动补全，或在 PostCSS 配置中显式启用 overrideBrowserslist 并指定 safari >= 15 才可能触发。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
混合写法要小心层叠顺序
如果你同时写标准和前缀版本，顺序很重要：
.no-select {
-webkit-user-select: none;
user-select: none;
}
这样写是安全的：Safari 用第一行，Chrome/Firefox 用第二行。但反过来就出问题：
.no-select {
user-select: none;
-webkit-user-select: none;
}
某些旧版 Safari（如 14.x）在解析到标准属性后，会跳过后续同名前缀属性，导致失效。别图省事，固定按“前缀优先”顺序写。
真正容易被忽略的点是：这个前缀不是“过渡期残留”，而是 Safari 当前（2026年10月）仍在使用的唯一有效语法。你检查 DevTools 的 Computed 样式时，如果看到 user-select: none 显示为 strike-through，基本可以确定没生效——立刻查是否漏了 -webkit-。它不像 flex 那样有 fallback 行为，不加前缀就是彻底不工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
