::selection 不能禁止复制，真正起作用的是 user-select: none；需精准作用于敏感字段并兼顾可访问性，配合 JS 和服务端校验才能有效防护。
::selection 本身不能禁止复制，它只负责控制用户选中文字后的高亮样式。想靠 ::selection 实现“禁止复制”，是常见误解。
真正起作用的是 user-select: none，而 ::selection 只能在文字被成功选中后才生效——但如果你已经用 user-select: none 拦住了选择行为，::selection 就根本不会触发。
所以问题本质不是“如何用 ::selection 禁止复制”，而是：怎么让敏感文字既不可选、又不破坏可访问性与用户体验？
为什么直接给敏感文字加 user-select: none 很危险
很多开发者一上来就对整个 body 或大块 div 设置 user-select: none，结果导致：
- 屏幕阅读器无法聚焦或朗读该区域内容（违反 WCAG 2.1）
- 键盘用户（Tab 导航）可能跳过关键信息
- 移动端长按触发的上下文菜单（如“翻译”“搜索”）全部失效
- 订单号、验证码等本应允许复制的字段也被锁死
只对特定敏感文字应用 user-select: none
明确限定作用范围，比如仅包裹订单号、身份证片段、API Key 等字段：
立即学习“前端免费学习笔记（深入）”；
<p>您的订单号为<span class="sensitive">ORD-7X9F2</span>，请妥善保管</p>
对应 CSS 写法必须带全浏览器前缀：
.sensitive {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}- 不要用
*:not(input, textarea)这类全局拦截，维护成本高且易误伤表单控件 - 避免用内联 style，否则难以统一管理或动态开关
- 若该字段需支持键盘焦点（如可 tab 进入），记得补上
tabindex="0"和aria-label
::selection 的唯一合理用途：弱化视觉反馈
即使设置了 user-select: none，部分浏览器（尤其旧版 Safari）在拖动时仍可能短暂闪出高亮。此时可用 ::selection 把高亮“藏起来”：
.sensitive::selection {
background: transparent;
color: inherit;
}注意两点：
-
::selection不支持opacity或visibility，只能靠background: transparent配合同色文字实现“不可见”效果 -
::-moz-selection在 Firefox 70+ 已废弃，无需再写 - 别给
.sensitive同时设color: transparent——这会让屏幕阅读器读不到内容
更隐蔽的敏感文字，得配合 JS 补防
CSS 层面的 user-select: none 可被禁用样式、审查元素修改、或通过 DevTools 直接取 DOM 文本绕过。真要防批量抓取，必须叠加服务端校验或动态渲染：
- 把敏感字段拆成多个
<span>，用 JS 拼接（防 Ctrl+A 全选） - 用 Canvas 渲染关键字符串（文本不可选、不可搜、不可右键保存）
- 关键字段延迟加载，且带一次性 token 校验（如订单号只在登录后 5 分钟内可见）
纯前端防复制没有银弹，user-select: none 是第一道门槛，但它的价值只在于提高普通用户的复制门槛，而不是构建安全边界。
