user-select 是 css 属性，必须通过 css 设置，不支持 html 内联写法；需加多前缀兼容各浏览器，且对 input/textarea 无效，子元素可覆盖父级设置，firefox 双击选词需额外 -moz 前缀。
如何用 user-select 精确控制元素是否可被鼠标选中
直接说结论：user-select 是 CSS 属性，不是 HTML 属性，不能写在标签里（比如 <div user-select="none"> 是无效的）。它必须通过 CSS 设置，且浏览器兼容性有差异，尤其是老版本 Safari 和 IE 需要前缀。<h3>
<code>user-select: none 为什么有时失效
常见现象：加了 user-select: none，但双击还是能选中文字，或子元素仍可被选中。根本原因是该属性不具有强制继承性，且对某些元素（如 <input>、<textarea></textarea>）默认行为优先级更高。
- 子元素默认会继承父级的
user-select值，但如果子元素显式设置了user-select: text或auto，就会覆盖父级 -
<input type="text">和<textarea></textarea>忽略user-select—— 它们由用户交互逻辑强制控制，CSS 无法禁用其文本选中 - Firefox 下
user-select: none对双击选词无效（会触发“双击选词”机制），需配合-moz-user-select: none - Chrome/Edge 95+ 支持标准语法，但 Safari 15.4 之前仍需
-webkit-user-select: none
全浏览器兼容写法（含关键例外）
要真正禁用选中，必须同时声明多个前缀，并注意作用范围。下面这段 CSS 能覆盖主流浏览器：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
但要注意：
- 如果目标是「仅禁止某段文字被选中，但允许里面链接点击」，不要给
<a></a>加该类，否则部分浏览器下会连带禁用链接高亮反馈 - 用在按钮或交互区域时，避免影响可访问性：屏幕阅读器和键盘焦点不受
user-select影响，但视觉反馈缺失可能误导用户 - 不要对整个
直接设user-select: none—— 用户复制错误信息、调试时取值都会受阻
什么时候该用 user-select: text 或 all
多数人只记得 none，但主动启用选中也很实用。比如卡片标题默认不可选，但希望用户能一键复制：
.copy-title {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
<p>/<em> 或者更激进：单次点击就全选（类似 <input> 的行为）</em>/
.copy-id {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}</p>
区别在于：
-
text：允许常规拖选、双击选词、三击选行 -
all：单击即全选该元素内所有文本（适合 ID、token、代码片段等） -
contain（实验性）：限制选中范围不溢出该元素边界，但目前仅 Chrome/Edge 支持，Safari/Firefox 无视
别忘了：这些值对 <button></button> 内文字有效，但对 <button></button> 自身的 focus outline 无影响。
