-webkit-user-select: none 仅禁用鼠标选中文本，不影响开发者工具查看、JS读取、抓包或截图，纯属UI交互优化，无任何安全防护能力。
为什么 -webkit-user-select: none 不能防爬或保安全
它只是告诉浏览器“别让鼠标选中这段文字”，对开发者工具、网络请求、DOM 操作完全无效。真实世界里，只要页面渲染完成，任何文本都能被脚本读取、复制、截图、抓包。
常见错误现象：document.querySelector('.secret').textContent 依然能拿到内容；右键“查看元素”照样看到 HTML；用 Puppeteer 或 Playwright 脚本照搬照抄。
- 使用场景仅限 UI 交互优化：比如防止误触选中按钮文字、避免长按触发 iOS 选词气泡
- 不提供任何加密、混淆、访问控制能力，和
disabled属性一样，纯属表层样式 - 兼容性上，
-webkit-user-select是前缀写法，现代浏览器基本支持无前缀的user-select: none，但 IE10+ 才开始支持
user-select 的合法值和实际效果差异
不同值影响的是用户能否用鼠标/手指触发文本选择行为，不是内容可见性或可访问性。屏幕阅读器、键盘焦点、JS 读取都不受影响。
-
none：禁用所有选择（包括双击、拖拽、快捷键Ctrl+A） -
text：只允许选中文本（默认值，但显式声明更可靠） -
all：整块元素一次全选（适合代码片段、短标识符） -
contain：限制在当前元素内选中（IE 不支持，Firefox 需要-moz-前缀）
注意：user-select: none 对 input、textarea 无效——它们有自己的选择逻辑，得靠 readonly 或 pointer-events: none 配合。
想真正限制文本获取？这些路走不通
有人试过把文字转成 canvas、用 background-image 拼字、甚至 SVG text —— 这些方法要么被 OCR 破解，要么被 DevTools 直接定位到资源地址，要么破坏可访问性（screen reader 完全读不到）。
- canvas 渲染文字：截图识别准确率 >95%，且
canvas.toDataURL()可直接导出供分析 - 图片/字体混淆：增加前端体积，加载失败就白屏，对 SEO 和无障碍是硬伤
- 服务端动态生成图片：延迟高、CDN 缓存难、无法复制分享，用户反感明显
真正需要保护的内容，必须留在服务端，靠鉴权 + 一次性 token + 接口限流来控，而不是在 CSS 里藏猫猫。
哪些情况用 user-select: none 是合理且有效的
它唯一靠谱的用途，是配合交互逻辑做“防手滑”。比如拖拽组件的 handle、评分星星、开关按钮的文字标签。
- React 中给按钮加
style={{ userSelect: 'none' }}，避免点击时意外选中旁边文字 - CSS 里写
.btn { user-select: none; -webkit-tap-highlight-color: transparent; }，iOS 上更干净 - Vue 组件里绑定
:style="{ 'user-select': isDragging ? 'none' : 'text' }"，动态控制
关键点：它从来不是一道门，只是门把手上的橡胶套——防滑，不防盗。真要锁东西，得去换锁芯，而不是裹胶带。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
