直接加 user-select: none 能禁用文本选中，但需显式重置 input、textarea、select、button 及 contenteditable 元素为 user-select: text，否则将导致光标定位失败、输入法异常；同时须补全 -webkit-、-moz-、-ms- 前缀以保障兼容性。
直接加 user-select: none 就能禁止选中，但别只写这一句——它在不同浏览器的默认行为和继承逻辑差异很大，不处理好反而会让输入框、按钮等可交互元素失效。
哪些元素必须显式重置 user-select
一旦在 body 或根容器上设了 user-select: none，所有子元素都会继承，包括 <input>、<textarea></textarea>、<button></button>、<select></select>。这些元素会失去文本选择能力，导致光标无法定位、无法拖动选区、甚至输入法异常。
- 必须对表单控件单独设置：
input, textarea, select, button { user-select: text; } -
contenteditable元素也要单独处理：[contenteditable="true"] { user-select: text; } - 如果用了自定义富文本编辑器（如
div[role="textbox"]），同样要显式设为text或auto
user-select 的取值差异和兼容性陷阱
none 是最常用值，但它的实际效果受父级影响；而 text 和 auto 在不同浏览器中表现也不一致。Chrome 和 Firefox 对 auto 的解释基本一致（由浏览器决定是否允许选择），但 Safari 15.4+ 才完全支持 auto，旧版 Safari 会忽略它并回退到 text。
- 安全写法是带前缀补全：
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -
all值能让点击一次就选中整块文本（适合标题、标签类元素），但它不被 IE 支持，且在移动端可能引发误触 - 慎用
contain：它本意是“只允许在该元素内选择”，但目前仅 Safari 支持，其他浏览器当none处理
为什么有时候加了 user-select: none 还能选中？
常见原因不是样式没生效，而是 CSS 优先级或作用域问题。比如你给某个 div 加了 user-select: none，但它内部的 p 标签又写了 user-select: text，那文字照常可选。
- 用浏览器开发者工具检查真实计算值（Computed →
user-select），确认最终生效的是哪个规则 - 避免用
!important粗暴覆盖，优先靠选择器权重控制，例如：.no-select * { user-select: none; }比.no-select { user-select: none; }更彻底 - 注意 Shadow DOM 场景：若组件使用了
shadowRoot，外部样式默认不穿透，需在组件内部单独设置
真正难处理的不是加一行 CSS，而是判断「哪些区域真不该被选中」——比如数据卡片里的 ID 字段确实该禁选，但旁边「复制」按钮的文案却需要用户能选中以手动复制。这类边界情况，得靠语义化结构 + 精确的选择器来收口，而不是一刀切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
