user-select属性控制文本是否可被用户选中，默认text可选可复制，none完全不可选且禁用右键复制（但Ctrl+C在部分浏览器仍有效），all单击全选，contain仅限元素内选择（仅Firefox原生支持）；需加-webkit-、-moz-、-ms-前缀以保证兼容性。
user-select 属性控制文本是否可被用户选中
它直接决定鼠标拖拽时能否高亮、复制页面中的文字内容。默认值是 text（可选），但设为 none 后，哪怕用鼠标左键拖动也不会出现蓝色选区，copy 则只允许复制（不显示选区但 Ctrl+C 仍生效）。
常见取值及实际行为差异
不同浏览器对部分值支持程度不一，生产环境建议优先用兼容性好的几个：
-
auto：由浏览器决定（通常等同于text） -
text：正常可选、可复制 -
none：完全不可选，也阻止右键菜单里的“复制”项（但键盘 Ctrl+C 在某些浏览器下仍可能生效） -
all：单击即全选该元素内所有文本（适合短标签如） -
contain：仅在该元素内部触发选择（子元素不会“逃逸”到父级选区），但目前仅 Firefox 原生支持
必须加浏览器前缀才能生效的场景
Chrome / Safari / Edge 在较老版本中不识别无前缀的 user-select，需显式补全：
div.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
注意：-ms- 前缀仅在 IE10+ 和旧版 Edge 有效；现代 Chrome 已支持无前缀写法，但为保底仍建议保留。
容易忽略的副作用和边界情况
设为 none 不等于“禁用复制”——用户仍可通过开发者工具查看 DOM、用 JS 读取 textContent、甚至截图 OCR 提取文字。它只是 UI 层的屏蔽手段：
- 表单控件（
、）不受影响，它们有自己的选择逻辑 - 如果父元素设了
user-select: none，子元素用user-select: text可以覆盖（继承不是强制的） - 配合
pointer-events: none使用时，会同时禁用点击和选择，但后者还会影响 focus、hover 等行为，要小心连带影响
真正需要防复制的场景，得靠服务端水印、动态渲染、或权限控制，CSS 层面只管视觉交互是否“顺手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
