user-select: none 单独使用无效，需补全浏览器前缀（-webkit-、-moz-、-ms-）且不适用于 input/textarea 等可编辑元素；它不能阻止右键保存图片或保障安全，仅是 ui 层提示。
user-select: none 为什么加了还是能选中？
直接写 user-select: none 很大概率无效，尤其在 <input>、<textarea></textarea> 或移动端。这不是你写错了，而是它根本不受控——浏览器对可编辑元素有强制策略，user-select 会被忽略。
必须补全前缀才可能生效：
-
-webkit-user-select: none（iOS Safari / Chrome 必需，缺了 iOS 长按仍弹“复制”） -
-moz-user-select: none（Firefox 仍依赖此声明） -
-ms-user-select: none（旧 Edge 需要，现代 Edge 已不强制但保留无害）
别只写标准属性；也别一股脑往 body 上加——它会污染表单控件，导致光标无法定位、双击选词失效。
禁右键保存图片，光靠 CSS 不够
CSS 本身不能阻止右键保存图片，user-select: none 只影响文本选择，对 <img> 标签完全无效。常见误区是给图片加 pointer-events: none，结果连点击事件都废了。
真正可控的组合方案：
- 用
background-image替代<img>标签：图片变成样式，右键菜单里没“图片另存为”选项 - 加一层透明遮罩（
div覆盖在图片上），并设pointer-events: none仅屏蔽右键，不影响底层图片的click - 必须配合 JS：监听
contextmenu并e.preventDefault()，否则 iOS Safari 和部分 Android 浏览器仍能长按触发菜单
注意：oncontextmenu="return false" 在现代 React/Vue 中不推荐——事件绑定需用 useEffect 或 mounted 动态添加/移除，避免全局污染。
哪些地方真该加 user-select: none？
不是所有“不想被复制”的文字都适合加。加错地方反而破坏基础交互：
- ✅ 安全场景：
.tab-label、.chip-text、图标旁的状态文案（如“已发布”徽标）、带role="button"的span - ❌ 绝对禁止：
<input>/<textarea></textarea>（光标拖动、快捷键 Ctrl+A 全选会失灵）、正文段落、链接文字（除非是纯 icon 按钮且已用aria-hidden="true"隔离） - ⚠️ 表格列头若支持排序，加了会导致点击后无视觉反馈（比如 hover 高亮消失）
React 中用 style={{ userSelect: 'none' }} 时，SSR 渲染下前缀丢失，必须改用 class；Vue 中 v-show 切换无效，得用 v-if 或确保响应式数据真实变更。
它根本防不住什么，你得心里有数
user-select: none 是 UI 层的礼貌性提示，不是安全机制。用户打开开发者工具删掉这行 CSS，或直接看 Network 里的 HTML 响应，原文照拿。截图、OCR、源码查看——全不受影响。
真正难的不是写这行代码，而是判断：“这里用户是否需要复制？”按钮文字禁选没问题，但侧边栏菜单项如果也禁了，用户想复制菜单名来提 bug 就卡住了。防复制需求背后，往往该优先考虑内容分级、权限控制或水印策略，而不是锁死前端交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
