user-select: none 不能完全阻止文本选择，仅禁用鼠标拖选、双击等主动操作，不影响程序化获取、屏幕阅读器及右键复制（仅使选区为空）；需加-webkit-、-moz-、-ms-前缀兼容旧浏览器；子元素可显式覆盖继承值；input/textarea等表单元素默认忽略该属性。
user-select: none 能否真正阻止所有场景下的文本选择
不能完全阻止，user-select: none 只影响用户主动触发的选择行为（鼠标拖选、双击、三击、键盘 Shift+方向键），对程序化操作（如 document.getSelection()、Range 操作、execCommand）或屏幕阅读器的文本遍历无影响。它也不阻止右键菜单中的“复制”项——只是让选区为空，复制时得不到内容。
哪些浏览器支持 user-select 且写法不同
现代浏览器基本都支持，但历史写法差异大，必须加前缀才能覆盖旧版 Chrome/Safari/Edge：
-
-webkit-user-select: none（Safari 3.1+、Chrome 1+、旧版 Edge） -
-moz-user-select: none（Firefox 1–68） -
-ms-user-select: none（IE 10–11、旧版 Edge） -
user-select: none（标准，Chrome 62+、Firefox 69+、Safari 15.4+）
单独写 user-select: none 在部分安卓 WebView 或老 iOS Safari 中会失效。
为什么给父元素设了 user-select: none，子元素仍可被选中
因为 user-select 具有继承性，但子元素可以显式重置它——只要子元素 CSS 中出现 user-select: text、user-select: auto 等声明，就会覆盖继承值。
立即学习“前端免费学习笔记（深入）”；
常见踩坑点：
- 第三方 UI 组件库（如 Ant Design、Element Plus）内部设置了
user-select: text，会穿透你的父级none -
<input>、<textarea></textarea>默认忽略user-select，它们的可选行为由编辑状态控制 - 使用
all: unset重置样式时，会连带清除user-select的继承效果，需手动补回
禁用选择但保留光标交互（如 input、button）的处理方式
直接对 button 或 input 设置 user-select: none 通常无效，因为这些元素的文本选择逻辑与普通元素不同；更稳妥的方式是：
- 对按钮内文字容器（如
<span></span>）设user-select: none，而非整个<button></button> - 避免在可聚焦/可编辑元素上强行禁选，否则可能干扰辅助技术
- 若为防止误复制，优先考虑移除冗余文本内容，而非依赖 CSS 阻断
真正难处理的是富文本区域或自定义编辑器——那里需要结合 onselectstart 事件和 preventDefault()，user-select 单独不够用。
