user-select: none 有时无效，主因是未作用于目标元素、被覆盖、不继承、表单控件忽略、firefox需-moz-前缀，或旧safari对all支持差。
user-select: none 为什么有时不起作用
直接加 user-select: none 却还能选中文字，大概率是样式没生效或被覆盖。这个属性不继承，父元素设了，子元素默认仍可选；而且它只对「用户主动触发的选择行为」有效，不影响 JS 调用 document.getSelection() 或 window.getSelection() 获取已有选区。
- 必须作用在目标元素本身，或用
*::selection { background: transparent; }配合隐藏视觉反馈（但不能阻止选择动作） - 遇到
<input>、<textarea></textarea>等表单控件，user-select会被浏览器忽略——它们有自己的选择逻辑 - Firefox 需要带前缀：
-moz-user-select: none；Chrome/Safari/Edge 现代版本已支持无前缀写法，但旧版 Safari（≤15.4）对all值支持不全
哪些场景下不该用 user-select: none
禁止选中不是万能的防复制手段，反而可能破坏基础可用性。比如代码块、API 参数名、错误日志这些本该允许用户复制的内容，硬加 user-select: none 会逼用户截图或手动重输。
- 可交互文本（按钮文字、标签、提示文案）禁选后，屏幕阅读器可能无法正确朗读，影响无障碍访问
- React/Vue 组件里动态渲染的文本，如果通过
contenteditable="false"+user-select: none双重限制，反而容易触发 Safari 的 focus 异常 - 配合
pointer-events: none使用时，元素既不可点也不可选，但键盘 Tab 仍可能聚焦到它——得额外加tabindex="-1"
想彻底禁用选择，除了 CSS 还要做什么
CSS 层面只能抑制鼠标和触屏的手动选择行为，JS 层仍有漏洞。用户右键 → “查看源码” 或 DevTools 直接定位 DOM，照样能拿到内容。真有敏感文本，得从服务端控制输出，而不是靠前端遮掩。
- 禁用右键菜单：监听
contextmenu事件并调用e.preventDefault()，但注意这会影响所有右键操作（如输入法候选框） - 阻止拖拽选中：给元素加
draggable="false"，否则在某些 Chrome 版本中拖动文字仍会触发选择 - 避免误伤：不要全局写
* { user-select: none; }，尤其别命中<pre class="brush:php;toolbar:false;"></pre>、<code>这类语义化容器
兼容老浏览器的最小安全写法
IE10+ 和现代主流浏览器都支持，但写法要保守。别用 user-select: all 或 user-select: text 这些非标准值，它们在部分 Android WebView 中行为不一致。
- 只用两个安全值：
none（禁选）、auto（恢复默认） - 完整声明示例：
code { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - 慎用 CSS-in-JS 库自动加前缀的功能——有些会把
user-select错误转成-webkit-user-drag这类无效属性
实际项目里最常被忽略的是：禁选之后，用户按 Ctrl+A 全选页面时，那些 user-select: none 的区域依然会被包含在选区范围内，只是不显示高亮。要不要处理这个，得看具体交互预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
