user-select: none 有时不生效，根本原因是它对 input、textarea、contenteditable 等可编辑元素无效，且受继承、优先级、前缀缺失及移动端渲染延迟影响；需全前缀书写、显式重置子元素、配合 -webkit-touch-callout: none 等增强控制。
user-select: none 为什么有时不生效
根本原因是它只对普通文本容器（div、p、span）起作用，对 input、textarea、contenteditable 元素完全无效——这不是 bug，是浏览器规范行为。你给一个包裹 input 的 div 加了 user-select: none，里面输入框文字照样能被选中。
常见错误包括：
- 只在父级设
user-select: none，没处理子元素中的表单控件 - 误以为加了前缀就万无一失，却忽略了移动端 Safari 长按仍可能唤出“复制”菜单
- 用
* { user-select: none }全局兜底，结果连按钮文字、下拉选项都不可选，破坏基本交互
怎么写才真正禁掉可选文本
必须显式覆盖所有可能被用户操作的文本节点类型。推荐组合写法：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.no-select input,
.no-select textarea,
.no-select [contenteditable] {
-webkit-user-select: text !important;
-moz-user-select: text !important;
user-select: text !important;
}
关键点：
- 前缀不能省：
-webkit-和-moz-在部分旧版安卓 WebView 或 Firefox 中仍是刚需 -
!important是必须的，否则通配或继承规则会覆盖子元素声明 - 不要加
-ms-user-select：IE 已淘汰，Edge 新版本也不再需要
移动端双击/长按仍能选中怎么办
iOS Safari 对 user-select: none 响应有延迟，尤其双击词组或长按时，系统菜单仍可能弹出。仅靠 CSS 不够，需补充两个声明：
-
-webkit-touch-callout: none：关闭长按后的系统菜单（如“复制”“搜索”） -
-webkit-tap-highlight-color: transparent：消除点击高亮，避免视觉误导
注意：这两个只对 WebKit 内核有效，无需加 -moz- 或 user- 标准前缀。
想局部放行可复制内容怎么搞
比如版权栏整体禁选，但其中邮箱地址要允许复制。不能依赖继承反转（user-select: text 在 none 父级下无效），必须显式重置：
.copyright { user-select: none; }
.copyright .email { user-select: text !important; }
这里 !important 同样不可少；另外，如果该邮箱是链接（a 标签），记得加 pointer-events: auto，否则某些浏览器会因父级 user-select: none 连带抑制点击反馈。
最易被忽略的一点：禁用选中不等于禁用复制——user-select: none 完全不影响 navigator.clipboard.writeText() 或屏幕阅读器读取，但它会让键盘用户按 Ctrl+A 时「看起来没反应」，实际是选中了但不可见，这点调试时容易误判。
