user-select: none 对 <p>、<span> 等普通文本元素生效，但对 <input>、<textarea>、<select> 等表单控件无效；常见失效原因包括继承覆盖、优先级冲突、旧版 Safari 缺失 -webkit- 前缀，需检查 computed style 确认最终值为 none。
user-select: none 在哪些元素上生效
直接给 <p> 或 <span> 加 user-select: none 是有效的，但对 <input>、<textarea>、<select> 这类表单控件无效——浏览器会忽略该样式，因为用户必须能选中输入框里的文字才能编辑。真正需要禁选的通常是标题、图标文字、水印、版权提示这类纯展示内容。
为什么加了 user-select: none 还能被选中
常见原因有三个：
一是父级设置了 user-select: auto 或没设，而子元素继承了可选状态；二是用了 !important 但被更高优先级的内联样式或浏览器默认样式覆盖；三是某些旧版 Safari（≤12）需要加 -webkit-user-select: none 前缀才生效。
- 务必检查 computed style，确认最终生效的是
user-select: none而非text或auto - 如果用 CSS-in-JS 或框架（如 Vue 的 scoped style），注意样式作用域是否漏掉了目标元素
- 禁选区域若含链接（
<a>），点击仍可用，但无法拖选文字——这点常被误认为“失效”
如何只禁选部分文字而不影响交互
最稳妥的做法是把要禁选的文字单独包裹一层 <span>，然后仅对该 <span> 设置样式，避免影响外层容器的其他行为（比如按钮点击区域、flex 布局等）。
<button> 点击我 <span style="user-select: none;">（不可选）</span> </button>
别用 pointer-events: none 替代——它会让整个元素失去点击响应，和禁选文字不是一回事。
立即学习“前端免费学习笔记（深入）”；
兼容性与移动端特殊表现
现代 Chrome/Firefox/Edge 全支持 user-select: none，但 iOS Safari 在长按触发菜单时，仍可能高亮文字（即使不可选），这是系统级行为，CSS 无法完全屏蔽。Android Chrome 则基本遵守该规则。
- 若需更强控制，可配合
onselectstart事件返回false，但仅作兜底，不要依赖 - 禁选文字若含 emoji 或复杂 Unicode 字符，在某些字体下可能出现光标残留，建议加
cursor: default统一视觉反馈 - 无障碍方面：禁选本身不影响屏幕阅读器读取，但别在可操作控件（如带
role="button"的 div）里滥用，否则会干扰键盘导航
真正麻烦的不是加一行 CSS，而是判断“这里到底该不该禁选”——比如一个带复制图标的标签，文字禁选了，但图标还要响应点击，这时候就得拆 DOM 结构，而不是靠一层样式硬压。
