user-select: none 加在 <table> 上无效，因其不继承，必须显式设置 <td> 和 <th>；表单控件如 <input> 完全忽略该属性，需用 readonly 配合视觉降级；iOS 长按菜单须额外加 -webkit-touch-callout: none。
user-select: none 单独写在 <table> 上基本没用——它不继承，<td> 和 <th> 依然可双击或拖拽选中。
为什么 table 上设 user-select: none 没效果
浏览器规范规定 user-select 不继承。你给 <table> 加了 user-select: none，但它的子元素 <td>、<th> 默认仍是 user-select: text，所以照样能选。更常见的是：表格里嵌了 <input type="text">，哪怕父级禁了，输入框文字仍可选——这不是 bug，是标准行为。
td/th 必须显式设置 user-select
最稳妥的做法是直接作用于单元格本身：
- 用类选择器统一控制：
.no-select-cell { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }然后每个<td>和<th>加class="no-select-cell" - 用属性选择器一步到位：
table[no-select] td, table[no-select] th { /* 同上四行 */ }再给表格加no-select属性：<table no-select> - 别用
table * { user-select: none; }——它会误伤内部的<input>、<button>，导致无法聚焦或点击
表格里有 input 或 textarea 怎么办
user-select: none 对原生表单控件完全无效。唯一可靠路径是语义化控制：
立即学习“前端免费学习笔记（深入）”；
- 加
readonly属性：<input readonly value="只读内容">，既阻止编辑，也自然失去文本选择焦点 - 配视觉降级：
background: #f5f5f5; cursor: default;，让用户一眼识别“不可操作” - 别用
pointer-events: none——它会同时禁掉聚焦、光标定位、键盘输入，体验比“可选”还差 - 如果必须保持可编辑（极少见），那就接受现实：
user-select对这类元素无解，现代浏览器没有标准 API 能只禁选不允编辑
iOS Safari 长按还是弹出菜单
这是最容易被漏掉的一环。即使 CSS 已生效，iOS WebKit 在长按时仍大概率唤出“复制/查找”菜单。必须额外加：
-
-webkit-touch-callout: none;——直接干掉那个气泡，仅对 Safari on iOS / iPadOS 有效 - 如果禁用后链接或按钮点不动了，记得给它们单独加
pointer-events: auto覆盖 - 前缀顺序不能错：
-webkit-user-select: none;必须在user-select: none;之前，否则旧版 Chrome 可能不认
真正麻烦的从来不是“怎么写”，而是“写在哪”和“写给谁”。静态数值展示（比如状态码、ID、只读金额）可以放心加 user-select: none；但只要涉及用户交互意图（哪怕只是光标定位），就得换思路——用 readonly、视觉反馈、或干脆接受可选的事实。
