user-select属性可禁用元素文本选中，基础写法为user-select: none，需加-webkit-、-moz-、-ms-前缀以兼容旧浏览器，支持text、contain、all等值实现精细控制，但需注意避免影响可访问性。
用 user-select 属性就能禁用元素的文本选中，浏览器原生支持，写法简单直接。
基础用法：禁止选中整个元素
给目标元素设置 user-select: none;，用户就无法用鼠标拖选其中的文字或内容。它会同时禁用鼠标拖选、双击选词、三击选段等所有默认选择行为。
- 适用于按钮、图标、标签、卡片标题等不需要被复制的交互区域
- 对
<input>和<textarea>无效（输入框必须可选中才能编辑） - 不会影响焦点、点击或键盘操作，仅控制视觉选择态
兼容性写法：覆盖主流浏览器
虽然现代浏览器基本都支持标准语法，但为兼顾旧版 Chrome、Safari、Firefox 和 Edge，建议加上前缀：
.no-select {
-webkit-user-select: none; /* Safari / Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ / Edge */
user-select: none; /* 标准语法 */
}精细控制：只禁用部分区域或允许特定行为
除了 none，user-select 还有其他取值，适合不同场景：
立即学习“前端免费学习笔记（深入）”；
-
text：仅允许文本选中（默认值，多数元素自动继承） -
contain：选中时只包含该元素内部，不会跨出边界（适合嵌套结构） -
all：点击一次就全选该元素的文本（适合展示代码片段或短标识符）
注意点：别误伤可访问性
禁用选中虽能防误操作或保护内容，但也可能影响屏幕阅读器用户或需要复制信息的正常用户：
- 关键信息（如验证码、API Key、错误提示）建议保留可选中
- 若完全禁用，请确保有替代操作方式（例如点击复制按钮）
- 避免在整页或大段内容上滥用
user-select: none
基本上就这些。合理使用 user-select，既保持界面整洁，又不牺牲可用性。
