或无法选中文本并非CSS锁定所致，而是user-select: none对原生表单控件完全无效；其选择行为由浏览器规范强制保障，父级设置无效；唯一可靠方式是使用readonly属性配合视觉反馈，禁用选择同时保留聚焦与导航能力。
直接结论：表格里 <input> 或 <textarea></textarea> 无法选中文本，不是 CSS 锁定的问题，而是 user-select: none 对原生表单控件完全无效——你改样式没用，必须用语义化方式控制。
为什么给 <td> 加 <code>user-select: none 后 <input> 还能选中？
因为浏览器规范明确：所有原生可编辑表单元素（<input>、<textarea></textarea>、<select></select>）无视 user-select 属性。哪怕父级 <td> 设了 <code>user-select: none，子元素仍按自身行为响应选择。这不是 bug，是标准行为。
常见错误现象：
- 开发者工具里看到
<td> 上有 <code>user-select: none，但双击<input>依然高亮文字 - 用 JS 监听
selectstart并preventDefault()，对<input>内部 selection 也无效 - 加
readonly属性：<input readonly value="只读内容">—— 它天然禁用文本选择，且保持聚焦和键盘导航能力 - 配
cursor: default和浅灰背景：background: #f5f5f5; cursor: default;，让用户一眼识别不可编辑 - 绝对不要用
pointer-events: none—— 它会让<input>失去焦点、无法光标定位、键盘输入失效 - 若需保留编辑（极少见），那就接受现实：现代浏览器没有 API 能“只禁选不允编辑”，
user-select在这里就是摆设 - 用属性选择器跳过表单控件：
table td:not(:has(input, textarea)), table th:not(:has(input, textarea)) { user-select: none; } - 或显式重置表单内样式：
table input, table textarea { -webkit-user-select: text !important; user-select: text !important; } - 更稳妥的是结构分离：把可编辑字段放在单独容器中，不混在“禁选区域”DOM 流里
真正禁用 <input> 文本选择的唯一可靠方式
放弃用 CSS 控制，改用 HTML 语义和视觉反馈组合：
立即学习“前端免费学习笔记（深入）”；
表格整体禁选时如何避免误伤表单控件？
通配写法如 table * { user-select: none; } 会把 <input> 也套进去，看似生效，实则破坏交互。正确做法是精准排除：
最容易被忽略的一点：iOS Safari 对 readonly 输入框的长按行为仍有差异，若需兼容，务必加 -webkit-touch-callout: none; 防止弹出系统菜单，但别指望它能进一步限制 selection —— selection 的控制权始终在表单元素自己手里。
