只写 user-select: none 必然失效，safari ≤16.4 和旧版 firefox 不识别，必须按顺序写四行前缀声明，并针对输入框、伪元素、shadow dom 等特殊场景单独处理。
直接结论：只写 user-select: none 必然失效，Safari ≤16.4 和旧版 Firefox 完全不识别它，必须显式补全前缀且顺序不能错。
为什么 user-select: none 在 Safari 里完全没反应
Safari ≤16.4（含 iOS 16.4 及更早）压根不解析标准 user-select，只认 -webkit-user-select: none。你写了标准写法但没加前缀，等于白写。开发者工具里样式明明“已加载”，文字却照常可拖选、双击高亮——这是最典型的失效表现。
常见误判点：
- 以为“现代浏览器都支持了”，忽略大量用户仍在用 macOS Safari 15.x 或 iOS 16.x
- 在构建流程中用了 PostCSS autoprefixer，但配置里关掉了
-webkit-前缀（默认会裁剪过时前缀） - 把
user-select: none写在了-webkit-user-select后面，导致 Safari 直接跳过标准声明
必须写的四行声明顺序不能错
CSS 是从上到下解析的，浏览器只认自己支持的那条。顺序错了，就等于没设防。
正确写法（顺序不可调换）：
.no-select {
-webkit-user-select: none; /* Safari, iOS, Chrome ≤61, Edge Legacy */
-moz-user-select: none; /* Firefox for Android / Firefox ≤68 */
-ms-user-select: none; /* IE10+, 旧 EdgeHTML, 某些 Electron 内核 */
user-select: none; /* Chrome ≥54, Firefox ≥69, Edge ≥79, Safari ≥15.5 */
}
说明：
-
-webkit-user-select必须放第一——Safari 15.2 会跳过user-select: none，但能解析-webkit-版本 -
-moz-user-select仍必要——Firefox for Android 和部分桌面旧版本（≤68）不支持无前缀 -
-ms-user-select虽然新版 Edge 已不需要，但保留无害，且对某些 WebView 场景仍有作用 -
user-select放最后，避免被前面的前缀规则意外覆盖
移动端长按菜单禁用要额外加 -webkit-touch-callout: none
user-select: none 只控制文本能否被高亮，不控制 iOS 长按时弹出“复制/搜索”气泡菜单。两者是独立机制，缺一不可。
关键点：
-
-webkit-touch-callout: none仅对 iOS Safari 有效，Android 浏览器完全忽略 - 必须和
user-select声明写在同一选择器里，否则 iOS 下仍可能触发菜单 - 不要加在
body或*上——会影响链接长按跳转等正常行为 - 微信安卓（X5 内核）基本无视这两个 CSS 属性，必须叠加
touchstart+e.preventDefault()手动拦截
表单控件、伪元素、Shadow DOM 这些地方容易漏掉
user-select 不是全局开关，很多场景下它根本不起作用：
-
<input>、<textarea></textarea>、contenteditable="true"元素强制忽略该属性，浏览器策略决定的 -
::before/::after里的文字不继承父级user-select，必须单独声明 - Shadow DOM 外部样式无法穿透，Web Components 内需在 shadow root 中单独写规则
- 全局写
* { user-select: none; }会导致<input>无法聚焦、<select></select>下拉失灵——这不是 bug，是语义误用
真正需要禁用某输入框文本选择时，优先考虑用 <div contenteditable="false"> 替代，并显式设 <code>user-select: none，避开表单元素的特殊逻辑。
复杂点在于：这些限制不是“写错了才失效”，而是浏览器设计如此。你得先判断目标元素类型、运行环境（iOS？微信？旧 Firefox？）、是否在 Shadow DOM 里，再决定要不要加 JS 补防、要不要重写结构——光靠一行 CSS 解决不了问题。
