user-select: none 单独使用常失效，因其不继承、对表单控件无效、ios长按仍弹菜单，且旧版浏览器需-webkit-、-moz-、-ms-等前缀兼容。
user-select: none 能让文字不可选中，但只写这一条几乎必然失效——它不继承、对 <input> 和 <textarea></textarea> 无效、在 iOS 长按时仍弹菜单，且旧版浏览器需前缀。
为什么 user-select: none 单独写常常没反应
最常见原因是样式没真正落到目标元素上。比如给父容器加了 .card { user-select: none; }，但里面一个 <span></span> 或图标字体仍能双击选中——因为该属性不继承，子元素默认仍是 text。另一个高频坑是：你给整个区域加了禁用，但其中的 <input type="text"> 照样可选，这不是 bug，是浏览器规范行为：user-select 对原生表单控件完全不生效。
还有三类隐性覆盖容易被忽略：
- 更高优先级 CSS 规则（如 inline style 或
!important）覆盖了你的user-select - 元素带
contenteditable="true"属性，此时浏览器直接跳过user-select判断 - 父级设了
pointer-events: none，导致该元素压根不进入选中流程，user-select根本没机会触发
跨浏览器兼容必须写的四行 CSS
现代浏览器基本支持标准 user-select，但 Safari 15.4 之前、部分 Android WebView、旧版 Edge 仍需前缀。仅写 user-select: none 在 Firefox 68 以下或 IE10+ 会彻底失效。
最小安全写法是：
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
注意：-o-user-select 和 -ms-user-select 是历史遗留，现在可删；但 -ms-user-select 对 Edge 12–18 用户仍有实际意义，别省。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
别用 * { user-select: none; } 全局重置——它会让所有 <button></button>、<select></select>、<input> 文字都不可选，用户连点击按钮都可能困惑。
<input> 和 <textarea></textarea> 怎么真正禁选
在它们身上写 user-select: none 是白费力气。唯一可靠路径是语义化控制：
- 加
readonly属性——它既阻止编辑，也自然剥夺文本选择焦点 - 配视觉降级：
background: #f5f5f5; cursor: default;，让用户一眼识别“不可操作” - 如果必须保持可编辑（极少见），那就接受现实：
user-select对这类元素无解，现代浏览器没有标准 API 能只禁选不允编辑 - 慎用
pointer-events: none：它会同时禁掉聚焦、光标定位、键盘输入，体验比“可选”还差
iOS Safari 长按仍弹菜单怎么办
这是最常被漏掉的一环。user-select: none 在 iOS Safari 上响应有延迟，长按大概率唤出「复制/查找/翻译」菜单，哪怕 CSS 已生效。
必须额外加：
.no-select {
-webkit-touch-callout: none;
}
这条只对 Safari on iOS / iPadOS 有效，桌面 Safari 忽略它，其他浏览器也不识别，所以不会造成副作用。如果禁用后链接点不了，记得给 <a></a> 单独加 pointer-events: auto 覆盖。
真正麻烦的从来不是“怎么写”，而是“写在哪”和“写给谁”。user-select 不是开关，它是一层策略——得配合元素语义、交互意图和浏览器实际行为来逐个校验，漏掉任意一环，用户双击或长按时都会打脸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
