user-select: none 仅禁用鼠标/触屏文本选择，不阻止复制、粘贴或屏幕阅读器读取；对 input/textarea 无效，需用 readonly 等替代方案；仅 none 值全平台稳定，其他值存在兼容性问题。
怎么用 user-select 禁掉文本选择
直接加 user-select: none 到目标元素的 CSS 里就行，但要注意它不继承，子元素默认仍可选——除非你显式给子元素也设一遍，或者用 * { user-select: none } 全局兜底（慎用）。
常见错误是只写在父容器上，结果里面 input、textarea 或按钮文字还是能被选中；更隐蔽的是，某些浏览器对表单控件会忽略 user-select: none，得配合 pointer-events: none 或禁用状态才能真正防误选。
-
user-select: none在 Chrome/Firefox/Edge 16+ 和 Safari 14+ 均支持，IE10+ 用-ms-user-select: none - 移动端 Safari 对
user-select: none的响应有延迟，长按仍可能触发系统菜单，需额外加-webkit-touch-callout: none - 如果只是想禁用某段文字但保留链接可点击，别忘了加
pointer-events: auto覆盖掉可能的父级禁用
为什么 user-select: none 在 input 里不生效
因为表单控件的文本选择行为由浏览器原生控制逻辑接管，CSS 的 user-select 对其无效。这不是 bug，是规范行为。
真实场景：你给一个 div 加了 user-select: none，里面嵌了个 input，结果用户照样能选中输入框里的文字——这时候别折腾 CSS，得换思路。
- 对
input或textarea，用onselectstart事件返回false（仅 IE/Edge 旧版），或监听mousedown+preventDefault()（不推荐，影响光标定位） - 更稳妥的做法是设
readonly属性，再配background: #f5f5f5视觉降级，既阻止编辑，也自然失去文本选择焦点 - 若必须保持可编辑但禁选择，只能接受限制：现代浏览器无标准方式，
user-select就是不管用
user-select 的取值差异和兼容性坑
user-select 不只有 none，还有 text、contain、all，但它们的行为和兼容性差别很大。
比如 user-select: all 在双击时会整块选中元素内容，在 Chrome 和 Safari 表现一致，但在 Firefox 中只对内联元素有效；而 contain（允许选中但禁止跨出该元素）目前只有 Chrome 支持，Firefox 和 Safari 完全无视。
-
text是默认值，但部分安卓 WebView 会忽略，导致意外不可选，建议显式声明 -
none是唯一全平台稳定可用的值，其他值不要用于生产环境的关键交互 - 用 Autoprefixer 时注意：它不会自动补
-webkit-user-select，得手动加或改配置
禁文本选择后，复制粘贴和屏幕阅读器还正常吗
禁用 user-select 只影响鼠标/触屏的手动选择行为，不影响 document.execCommand('copy') 或 navigator.clipboard.writeText()，也不影响屏幕阅读器读取文本内容。
但有个容易被忽略的点：如果整个页面都用了 user-select: none，键盘用户按 Ctrl+A 仍会全选（因为这是浏览器快捷键逻辑，独立于 CSS），只是选区不可见——这会让辅助技术使用者困惑。
- 别对
body或html直接设user-select: none，优先精确到具体模块 - 如果真要防复制，得结合 JS 拦截
contextmenu、copy事件，但纯前端无法真正阻止，这点要心里有数 - 无障碍测试时记得手动开屏幕阅读器试读，确认文本语义没被
user-select影响
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
