user-select用于控制文本是否可选，现代浏览器原生支持，但ie需-ms-user-select、旧版safari需-webkit-user-select、旧版firefox需-moz-user-select，四者须共存且标准写法置后。
user-select 属性的基本用法和浏览器兼容性
user-select 是控制用户能否选中元素内文本的 CSS 属性，主流现代浏览器（Chrome 54+、Firefox 69+、Safari 15.4+、Edge 79+）原生支持 user-select: none。但注意：IE 和旧版 Safari（-webkit-user-select 或 -moz-user-select。
实际项目中建议同时写全前缀，避免部分老设备失效：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
不写前缀在 iOS Safari 15.2 或某些 Android WebView 中可能完全无效。
为什么给 body 设置 user-select: none 后仍能选中部分文字？
因为 user-select 不会继承到表单控件、<input>、<textarea></textarea>、<button></button> 等可交互元素——这些元素默认强制启用文本选择（尤其为了方便编辑内容）。即使你在 body 上设了 user-select: none，点击 <input> 依然能拖选里面已有的文字。
- 解决办法是单独重置这些元素：
input, textarea, button { user-select: text; }（如果希望它们可选），或显式设为none（但会损害可用性） - 更稳妥的做法是只对特定容器（如
.article-content）应用user-select: none，避开表单区域 - 注意：设为
none后，document.getSelection().toString()将始终返回空字符串，影响依赖选区的 JS 功能（如高亮插件）
user-select 的其他取值和实际效果差异
user-select 支持多个值，不同值影响用户交互行为：
-
none：完全禁止选中（但不影响焦点、键盘导航或鼠标事件） -
text：仅允许选中文本（最常用，也是默认值） -
all：双击或三击时整块选中（适合标签、代码片段等小段内容，避免零碎选择） -
contain：允许在该元素内开始选择，但不会跨出边界（CSS UI 4 新增，目前仅 Chrome 120+ / Safari 17.4+ 支持，Firefox 尚未实现）
例如，给一个 <code> 标签加 user-select: all，用户双击就能一次性选中整段代码，体验比默认 text 更干净。
容易被忽略的副作用和调试技巧
禁用文本选择后，有些视觉反馈会消失，比如光标样式不会变（仍显示 default 而非 text），这会让用户困惑“是不是卡了”。可以配合 cursor: default 显式统一提示。
- 调试时，用浏览器 DevTools 检查 computed 样式，确认
user-select是否被更高优先级规则覆盖（比如某个!important的第三方 CSS） - 移动端上，长按触发的「复制」菜单仍可能出现——这是因为部分浏览器（如 iOS Safari）在长按时会临时绕过
user-select，这是 UA 行为，无法靠 CSS 完全屏蔽 - 如果目标是防内容被抓取，
user-select: none几乎没用：右键「查看源码」、开发者工具、甚至截图 OCR 都不受影响；它只是提升一点基础体验门槛
真正需要防复制的场景，得结合服务端水印、动态渲染、或 JS 层拦截 selectstart 事件——但后者同样可被禁用 JS 绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
