Chrome、Firefox、Safari（10.1+）、Edge（12+）均支持 user-select: none；Safari 旧版本（<10.1）不支持或仅部分支持该属性。
user-select: none 在哪些浏览器里真正生效
Chrome、Firefox、Safari（10.1+）、Edge（12+）都支持 user-select: none，但 Safari 旧版本（-ms-user-select: none 前缀才管用。如果你的用户还有大量 IE11 或老版 macOS 用户，光写标准属性会失效。
- 必须同时写
user-select: none和-ms-user-select: none才能覆盖 IE11 - Safari 9 及更早版本对
user-select完全无视，只能靠 JS 拦截selectstart事件补救 - 移动端 iOS Safari 对
user-select: none的响应有延迟，长按后仍可能短暂高亮
为什么给 div 加了 user-select: none 还能被选中
常见原因是样式没生效或被更高优先级规则覆盖。比如父元素设了 user-select: text，子元素即使写了 none 也会继承 —— user-select 是可继承属性，不是自动“穿透”的。
- 检查 computed styles，确认目标元素上实际生效的是
none，而不是 inherited 或 unset - 避免依赖继承：直接在目标元素上写
user-select: none，别只写在父级 - 如果用了 CSS-in-JS 或 scoped style（如 Vue），注意选择器权重是否足够，有时需要加
!important（虽然不推荐，但这里实用） - 某些富文本编辑器（如 Quill、Tiptap）会主动重置该样式，得在它们的 class 上再覆盖一遍
禁用选中后，input 和 textarea 里的文字也选不了怎么办
user-select: none 是全局生效的，一旦父容器设了它，里面的 <input>、<textarea> 也会失去文本选择能力 —— 这显然违背交互直觉。
- 必须对表单控件单独重置：
input, textarea { user-select: text; } - 如果用了 Web Components 或 Shadow DOM，需在 shadow root 内部也声明
user-select: text，外部样式不会穿透 - React 中用
contentEditable的 div 也要单独处理，它不走表单样式逻辑，得显式设user-select: text
用 JavaScript 拦截 selectstart 是不是更可靠
纯 CSS 有兼容和穿透问题，JS 方案（监听 selectstart 并 preventDefault()）确实能兜底，但副作用明显：它会阻止所有选择行为，包括用户想复制按钮文字、调试时选中 DOM 节点等。
立即学习“前端免费学习笔记（深入）”；
- 仅在 CSS 失效的场景下作为 fallback，不要默认启用
- 绑定事件时用
{ capture: true }，否则某些嵌套结构里事件可能被提前终止 - 记得排除
input、textarea和带contenteditable="true"的元素，否则破坏基础交互 - 移动端要额外监听
touchstart+preventDefault()，因为selectstart在 iOS 上触发不稳定
contenteditable 区域，或者某段第三方组件注入的内联样式。 
