::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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
对应 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></span>，用 JS 拼接（防 Ctrl+A 全选） - 用 Canvas 渲染关键字符串（文本不可选、不可搜、不可右键保存）
- 关键字段延迟加载，且带一次性 token 校验（如订单号只在登录后 5 分钟内可见）
纯前端防复制没有银弹，user-select: none 是第一道门槛，但它的价值只在于提高普通用户的复制门槛，而不是构建安全边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
