应谨慎使用 user-select: none，仅用于非文本内容或纯装饰性文字（如 .tab-label、.chip-text），避免影响可访问性、表单交互与调试；需兼顾 Safari 兼容性及屏幕阅读器兼容。
直接禁用文字选中，用 user-select: none 就行，但别乱加——它会影响可访问性、表单交互和调试效率。
哪些元素该加 user-select: none
只在明确“非文本内容”或“纯装饰性文字”上启用，比如按钮标签、图标旁的静态状态文案、卡片标题（当点击区域本身不触发文本操作时）。
- ✅ 适合：
.tab-label、.chip-text、带role="button"的span - ❌ 不适合：
input、textarea、段落正文、链接文字（除非是 icon-only 按钮且已用aria-hidden="true"隔离） - ⚠️ 特别注意：Safari 旧版本需加
-webkit-user-select: none，现代浏览器已统一支持标准属性
user-select 的取值差异与实际效果
不同值对用户行为影响差别很大，不是只有 none 和 text 两种选择：
-
none：完全禁止选中，鼠标拖拽无效，但键盘Ctrl+A仍可能选中父容器内可文本内容（取决于 DOM 结构） -
text：默认行为，允许选中，但不会继承自父级none—— 子元素设为text可破除父级限制 -
all：双击即全选该元素文本（适合标签类短文案），但不触发跨元素选择 -
contain：实验性值，目前仅 Firefox 支持，表示选中范围限定在本元素内
容易被忽略的兼容性与副作用
加了 user-select: none 后，开发者常遇到三类意外问题：
立即学习“前端免费学习笔记（深入）”；
- 复制调试信息变困难：控制台打印的 DOM 节点若含
user-select: none，右键“复制文本”会失败，建议开发环境用 CSS class 控制，上线前移除或条件启用 - 屏幕阅读器可能跳过：部分读屏工具依赖文本可选性判断是否朗读，对纯视觉文案应补
aria-live或显式role="presentation" - 移动端长按触发菜单异常：iOS Safari 在
user-select: none元素上长按，可能不弹出“复制/搜索”菜单，需配合touch-action: manipulation修复响应
真正难的不是写这行 CSS，而是判断“这里用户到底需不需要选中”——一个按钮上的文字禁用选中很安全，但同一页面里侧边栏菜单项如果也禁了，用户想复制菜单名反馈问题就卡住了。
