加了 user-select: none 仍能选中最常见原因是样式被子元素覆盖或作用于禁用该属性的元素（如 input、textarea、contenteditable 元素），伪元素不继承、shadow dom 不穿透及移动端需额外处理。
为什么加了 user-select: none 还是能选中
最常见原因是样式没生效，不是属性写错了，而是被覆盖或作用对象不对。比如给 div.wrapper 加了 user-select: none，但里面有个 <p></p> 或 <span></span> 显式写了 user-select: text，那它照样可选——user-select 是可继承的，但子元素能直接覆盖。
还有三类硬性失效场景必须避开：
-
<input>、<textarea></textarea>、contenteditable="true"元素会无视user-select，这是浏览器强制行为 - 伪元素（如
::before）默认不继承，得单独加 - Shadow DOM 外部样式无法穿透，Web Components 里必须在 shadow root 内声明
移动端长按仍弹出“复制”菜单怎么办
iOS Safari 和部分 Android WebView 对 user-select: none 的支持偏弱，单靠 CSS 很难彻底屏蔽长按菜单。关键动作是补全前缀并叠加轻量 JS 干预：
- 必须写全：
-webkit-user-select: none（iOS 必需）、-moz-user-select: none、-ms-user-select: none、user-select: none，且标准属性放最后 - 对非表单区域，加
touchstart监听并调用event.preventDefault()，抑制长按触发菜单（注意：不能在input上用，会废掉光标） - 避免给该元素设
tabindex="0"，否则 Android Chrome 可能允许双击高亮
怎么安全地用在按钮或标签上
按钮文字、Tab 标题、Chip 文案这类纯装饰性文本，才是 user-select: none 的合理使用场景。但要注意语义和交互边界：
- 只加在文字容器上，比如
<button><span class="btn-label">提交</span></button>，然后对.btn-label设样式，别直接套在<button></button>上 - 若该元素有
role="button"或aria-hidden="true"，再加user-select: none才算稳妥 - 绝对不要用在
<a></a>链接文字上（除非是 icon-only 按钮且已隔离语义），否则用户想复制链接名反馈问题就卡住 - 开发环境建议用 class 控制（如
.no-select-dev），上线前移除或条件启用，避免影响调试时右键复制 DOM 文本
别把它当防复制手段用
user-select: none 只阻止鼠标拖选、双击、三击等主动操作，对 window.getSelection()、document.execCommand('copy')、屏幕阅读器遍历、甚至右键“复制”菜单（只是复制出来为空）完全无效。真要防内容被提取，得靠服务端权限控制或动态渲染，CSS 层面最多起提示作用。
最容易被忽略的一点：加了这个属性后，键盘导航可能断裂。如果禁用的是可聚焦区域（比如带 tabindex 的 div），记得补上 role="button" 和明确的 aria-label，否则屏幕阅读器用户根本“看不见”它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
