user-select: none 单独使用无效，因不继承、对表单控件无效、移动端长按仍触发系统菜单；必须补全 -webkit- 和 -moz- 前缀，并配合 -webkit-touch-callout: none 等针对性规则。
user-select: none 单独写在 CSS 里基本没用——它不继承、对 <input> 和 <textarea></textarea> 完全无效，移动端长按还会弹系统菜单。
为什么只加 user-select: none 总是失效
浏览器默认不把该属性向下传递：父元素设了 user-select: none，子元素（比如 <span></span>、<i></i> 或图标字体）仍按自身默认值 text 处理，一碰就选中。
- 表单控件是“特例”：规范明确要求
<input>、<textarea></textarea>忽略user-select，所以加了也白加 - 移动端 Safari 在长按时会绕过 CSS，直接唤出「复制/查找」菜单，哪怕样式已生效
- 如果元素同时有
contenteditable="true"或pointer-events: none，user-select会被跳过或覆盖
真正能用的跨浏览器写法
必须一次性补全前缀，且不能依赖单一声明。现代最小兼容组合是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
- 不用
-ms-user-select：Edge 102+ 已完全支持标准语法，IE 已淘汰 - 别写
-o-user-select或-khtml-user-select：Opera Presto 和旧 WebKit 引擎早已退出主流 - 避免
* { user-select: none }全局重置：它会让所有<button></button>、<select></select>、<input>都无法聚焦或操作
<input> 和 <textarea></textarea> 怎么真正禁选
放弃在它们身上写 user-select，这条路从规范上就走不通。
- 设
readonly属性：最轻量、最可靠，既阻止编辑，也自然失去文本选择焦点 - 配视觉反馈：
background: #f5f5f5; cursor: default;，让用户感知“不可操作” - 若必须保持可编辑（极少见），就接受现实：
user-select对它无解，现代浏览器没有标准 API 能只禁选不允编辑 - 慎用
pointer-events: none：它会同时禁掉聚焦、光标定位、键盘输入，体验比“可选”还差
移动端 Safari 长按菜单怎么关
仅靠 user-select 系列声明无法拦截 iOS 长按行为，必须加专属规则：
.no-select {
-webkit-touch-callout: none;
}
- 这条只对 Safari on iOS / iPadOS 有效，桌面 Safari 和其他浏览器忽略它
- 如果禁用后链接点不动了，记得给
<a></a>单独加pointer-events: auto覆盖 - 搭配
-webkit-tap-highlight-color: transparent可去掉点击高亮，但非必需
真正麻烦的从来不是“怎么写”，而是“写在哪”和“写给谁”。user-select 不是开关，它是一层策略——得配合元素语义、交互意图和浏览器实际行为来判断是否该禁、禁到哪一级、要不要留出口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
