或无法选中文本并非CSS锁定所致，而是user-select: none对原生表单控件完全无效；其选择行为由浏览器规范强制保障，父级设置无效；唯一可靠方式是使用readonly属性配合视觉反馈，禁用选择同时保留聚焦与导航能力。

直接结论：表格里 或 无法选中文本，不是 CSS 锁定的问题，而是 user-select: none 对原生表单控件完全无效——你改样式没用，必须用语义化方式控制。

为什么给 加 user-select: none 后 还能选中？

因为浏览器规范明确：所有原生可编辑表单元素（、、）无视 user-select 属性。哪怕父级 设了 user-select: none，子元素仍按自身行为响应选择。这不是 bug，是标准行为。

常见错误现象：

• 开发者工具里看到 上有 user-select: none，但双击 依然高亮文字
• 用 JS 监听 selectstart 并 preventDefault()，对 内部 selection 也无效

真正禁用 文本选择的唯一可靠方式

放弃用 CSS 控制，改用 HTML 语义和视觉反馈组合：


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• 加 readonly 属性： —— 它天然禁用文本选择，且保持聚焦和键盘导航能力
• 配 cursor: default 和浅灰背景：background: #f5f5f5; cursor: default;，让用户一眼识别不可编辑
• 绝对不要用 pointer-events: none —— 它会让 失去焦点、无法光标定位、键盘输入失效
• 若需保留编辑（极少见），那就接受现实：现代浏览器没有 API 能“只禁选不允编辑”，user-select 在这里就是摆设

表格整体禁选时如何避免误伤表单控件？

通配写法如 table * { user-select: none; } 会把 也套进去，看似生效，实则破坏交互。正确做法是精准排除：

• 用属性选择器跳过表单控件：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 流里

最容易被忽略的一点：iOS Safari 对 readonly 输入框的长按行为仍有差异，若需兼容，务必加 -webkit-touch-callout: none; 防止弹出系统菜单，但别指望它能进一步限制 selection —— selection 的控制权始终在表单元素自己手里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！