user-select: none加了仍能选中最常见原因是样式未作用于目标元素，因该属性不继承，子元素默认仍为text；另三类隐性失效是更高优先级规则覆盖、contenteditable元素强制启用编辑逻辑、pointer-events: none使事件流中断。
user-select: none 为什么加了还是能选中
最常见的情况不是代码写错，而是样式根本没落到目标元素上。比如你给 .card 加了 user-select: none，但里面一个 <p></p> 或 <span></span> 仍能双击选中——因为 user-select 不继承，子元素默认仍是 text。
还有三类隐性失效特别容易被忽略：
- 更高优先级规则覆盖：比如某个
.form-input类里写了user-select: text，它会直接盖掉父级的none - 目标元素带
contenteditable="true"属性：浏览器跳过user-select判断，直接启用编辑逻辑 - 父级设了
pointer-events: none：该元素压根不参与事件流，user-select根本没机会触发
用浏览器开发者工具检查「Computed」面板里的 user-select 值，确认最终生效的是哪条规则，比猜更可靠。
input 和 textarea 怎么真正禁掉文本选择
user-select: none 对 <input>、<textarea></textarea> 无效——这不是 bug，是浏览器规范行为。它们的文本选择由原生控件逻辑接管，CSS 无法干预。
唯一可靠路径是语义化控制：
- 加
readonly属性：既阻止编辑，也自然剥夺文本选择焦点 - 配视觉降级：
background: #f5f5f5; cursor: default;，让用户一眼识别“不可操作” - 如果必须保持可编辑（极少见），那就得接受现实：现代浏览器没有标准 API 能只禁选不允编辑
别用 pointer-events: none 替代——它会同时禁掉聚焦、光标定位、键盘输入，体验比“可选”还差。
移动端 Safari 长按仍弹菜单怎么办
iOS Safari 对 user-select: none 响应有延迟，长按大概率仍弹出“复制”“分享”菜单。单靠 CSS 不够，必须补两样：
- 强制加
-webkit-user-select: none（Safari/iOS 必需） - 叠加
-webkit-touch-callout: none，直接禁用长按呼出的系统菜单
示例写法：
.no-select {
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
注意：这个组合在 iOS 15.4+ 稳定生效，旧版 iOS 可能仍有微小窗口期，但已大幅降低误触发概率。
哪些地方绝对不能加 user-select: none
加错位置比不加更危险。以下场景加了会直接破坏基础交互：
-
<input>、<textarea></textarea>、<select></select>、<button></button>：失去光标定位能力，用户连点击都困惑 - 整个
或全局* { user-select: none }：用户复制错误信息、调试取值、甚至阅读辅助工具都会受阻 - 表格列头（th）若支持排序：加了会让点击后无高亮反馈，视觉断连
- 富文本编辑器容器（如
div[role="textbox"]）：除非你明确重置为text或auto，否则编辑功能直接瘫痪
真正难处理的不是加一行 CSS，而是判断「哪些区域真不该被选中」——比如数据卡片里的 ID 字段确实该禁选，但旁边「复制」按钮的文案却需要用户能选中以手动复制。这类边界，得靠语义化结构 + 精确的选择器收口，而不是一刀切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
