user-select: none 仅阻止选中而非复制，因文本仍可读；其常失效是因表单元素强制允许选择、继承未重置、高优先级样式覆盖或 Safari/iOS 系统行为；需写全兼容前缀并显式重置表单控件为 text。
user-select: none 本身不能禁止复制，只能阻止选中行为；真正能被“复制”的内容，只要 DOM 存在、文本可读，就无法靠 CSS 彻底拦截。
为什么 user-select: none 经常失效
不是写错了，而是被绕过了：
-
<input>、<textarea></textarea>、contenteditable="true"元素浏览器强制允许选择，加了也无视 - 父级设了
user-select: none，子元素没显式覆盖，继承导致失效（user-select是可继承属性） - 更高优先级样式覆盖，比如第三方 UI 库的 class 带
!important，或内联写了user-select: text - iOS Safari 长按后仍可能短暂高亮甚至弹出“复制”菜单——这是渲染延迟 + 系统行为干预，不是 CSS 失效
必须写全的兼容写法（含前缀）
只写 user-select: none 在 Safari 14.0 以下、IE11、部分 Android WebView 中会彻底失效。要兜底，得一次性写全：
element {
-webkit-user-select: none; /* Safari & iOS */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ / Edge */
user-select: none; /* 标准，必须放最后 */
}
注意：-khtml-user-select 已淘汰，不用加；body { user-select: none } 不推荐——它会影响所有后代，包括你忘了重置的 <input>，结果用户连输入框都选不了文字。
哪些元素必须显式重置为 user-select: text
一旦在 body 或根容器上设了 user-select: none，所有表单控件都会继承，导致光标无法定位、输入法异常、拖动选区失败。必须单独重置：
input,
textarea,
select,
button,
[contenteditable="true"] {
user-select: text;
}
如果用了自定义富文本编辑器（如 div[role="textbox"]），同样要显式设为 text 或 auto。
::selection 的真实作用和误用
::selection 不能禁止复制，它只控制选中后的高亮样式。如果你已经用 user-select: none 拦住了选择行为，::selection 就根本不会触发。
它的唯一合理用途是弱化视觉反馈：旧版 Safari 拖动时可能短暂闪出高亮，可用以下方式“藏起来”：
.sensitive::selection {
background: transparent;
color: inherit;
}
注意：::selection 不支持 opacity 或 visibility；别给敏感字段同时设 color: transparent——这会让屏幕阅读器读不到内容。
真正难处理的不是加一行 CSS，而是判断「哪些区域真不该被选中」。比如数据卡片里的 ID 字段确实该禁选，但旁边「复制」按钮的文案却需要用户能选中以手动复制。这类边界情况，得靠语义化结构 + 精确的选择器来收口，而不是一刀切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
