user-select: none 失效主因是前缀缺失、作用于可编辑元素或被子元素覆盖；需补全-webkit-/-moz-/-ms-前缀，避开input/textarea等元素，并对表单控件显式重置为text。
直接加 user-select: none 不行，必须配全前缀、避开可编辑元素、并显式重置表单控件，否则要么无效，要么把输入框也锁死。
为什么 user-select: none 加了还被选中？
最常见原因不是写错了，而是没写全或被覆盖：
-
-webkit-user-select: none缺失 → iOS Safari 和旧版 Chrome 直接忽略 -
-moz-user-select: none缺失 → Firefox 旧版本不生效 -
-ms-user-select: none缺失 → IE/Edge 旧版失效 - 目标元素是
<input>、<textarea></textarea>或带contenteditable="true"的元素 → 浏览器强制无视该属性 - 子元素显式设了
user-select: text（比如第三方 UI 组件）→ 覆盖父级继承值
验证是否生效：打开 DevTools → Elements 面板选中目标元素 → 右侧 Styles 标签页下拉到底，看 Computed 中 user-select 的最终值是不是 none。
哪些元素必须手动重置为 user-select: text？
一旦你在 body 或根容器上设了全局禁止，所有子元素都会继承。但以下控件必须立刻“解禁”，否则用户无法正常使用：
立即学习“前端免费学习笔记（深入）”；
-
input、textarea、select、button -
[contenteditable="true"]（包括富文本编辑器宿主） - 自定义角色元素，如
div[role="textbox"]或div[aria-haspopup="true"]
推荐写法：
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input, textarea, select, button,
[contenteditable="true"],
div[role="textbox"] {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
移动端长按仍弹出“复制”菜单怎么办？
iOS Safari 和部分 Android WebView 对 user-select: none 支持较弱，仅靠 CSS 不足以抑制长按菜单。需配合：
- 给目标区域加
touch-action: manipulation，减少系统对长按的默认响应 - 避免在
<div> 上直接设 <code>user-select: none后又监听contextmenu—— 这类 JS 拦截在 iOS 上常被绕过或延迟触发 - 若内容真敏感（如订单号），优先用
class="sensitive"精准包裹，而非整页禁用 - 错：
.icon::before { user-select: none; }→ 完全无效 - 对：
.icon { user-select: none; }→ 才能阻止用户选中整个图标及前后文
注意：touch-action: manipulation 本身不影响鼠标行为，只作用于触控，和 user-select 是互补关系，不是替代。
伪元素和 Shadow DOM 怎么处理？
::before / ::after 生成的内容不能被选中，但不是因为它们自己支持 user-select，而是因为伪元素不参与 DOM 选择逻辑。想让它们“不可选”，得作用于其宿主元素：
Shadow DOM 外部样式默认不穿透。如果你用 Web Components 封装了敏感字段，必须在 shadow root 内部单独声明：
// 在 custom-element.js 的 shadow DOM 中
const style = document.createElement('style');
style.textContent = `
.sensitive {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
`;
shadowRoot.appendChild(style);
别指望外部 CSS 能一键控制 shadow 内部元素的选中行为。
