user-select: none 仅对纯展示元素有效，对表单控件无效；需写全前缀并显式重置 input 等元素为 text，否则继承导致无法选中文本或输入异常。
user-select: none 不是开关，而是提示；它对 <input>、<textarea></textarea>、contenteditable 元素完全无效，也不能阻止 Ctrl+A 或开发者工具取文本——真正起效的前提是：精准作用于纯展示型元素，且写全前缀。
为什么加了 user-select: none 还能选中？
失效不是因为语法错，而是被绕过：
-
<input>、<textarea></textarea>等表单控件有用户代理样式强制设为user-select: text，父级none会被覆盖 - 父容器设了
user-select: none，但子元素（比如一个<span></span>）没显式重置，又继承了text值（user-select是可继承属性） - 更高优先级规则覆盖，例如框架 class 带
!important，或内联样式写了user-select: text - iOS Safari 长按时仍可能短暂高亮甚至弹出“复制”菜单——这是渲染延迟 + 系统行为干预，不是 CSS 失效
必须写的兼容写法（含前缀）
只写 user-select: none 在 Safari 14.0 以下、IE11、部分 Android WebView 中会彻底失效。要兜底，得一次性写全：
.no-select {
-webkit-user-select: none; /* Safari & iOS */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ / Edge */
user-select: none; /* 标准 */
}
注意：-khtml-user-select 已淘汰，不用加；body { user-select: none } 不推荐——它会影响所有后代，包括你忘了重置的 <input>，结果用户连输入框都选不了文字。
哪些元素必须显式重置 user-select？
一旦在根容器上设了 user-select: none，所有子元素都会继承，包括 <input>、<textarea></textarea>、<select></select>、<button></button>。这些元素会失去文本选择能力，导致光标无法定位、无法拖动选区、甚至输入法异常。
必须对表单控件单独设置：
input, textarea, select, button {
user-select: text;
}
[contenteditable="true"] {
user-select: text;
}
如果用了自定义富文本编辑器（如 div[role="textbox"]），同样要显式设为 text 或 auto。
真正难处理的不是加一行 CSS，而是判断「哪些区域真不该被选中」
比如数据卡片里的 ID 字段确实该禁选，但旁边「复制」按钮的文案却需要用户能选中以手动复制。这类边界情况，得靠语义化结构 + 精确的选择器来收口，而不是一刀切。
移动端 Safari 在 user-select: none 下仍可能响应长按触发菜单，得配合 -webkit-touch-callout: none 才彻底隐藏。别只盯着 PC 浏览器测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
