给label加user-select: none无效，因其不继承，内部文本和子元素（如input、span）仍按自身默认值处理；禁选需作用于具体节点并配全前缀及-webkit-touch-callout: none。
label 标签本身不控制文本是否可选，禁用选中行为必须作用于其内容或关联的控件，而不是 label 元素本身。
为什么给 label 加 user-select: none 没用
浏览器规范规定 user-select 不继承，label 上设了 user-select: none，但内部文字（如纯文本节点）或子元素（如 input、span）仍按自身默认值处理。更常见的是：你点了 label 文本，实际焦点跳到关联的 input，而该 input 仍可双击选中文本——这不是 CSS 失效，是标准行为。
label 包裹的 input 怎么真正禁选
别在 input 上硬套 user-select: none，它对原生表单控件无效。可靠路径只有两条：
- 加
readonly属性：<input type="text" readonly value="只读内容">，既阻止编辑，也自然失去文本选择焦点 - 配视觉降级：
background: #f5f5f5; cursor: default;，让用户一眼识别“不可操作” - 绝对不要用
pointer-events: none——它会同时禁掉聚焦、光标定位、键盘输入，体验比“可选”还差
纯文本 label（无子控件）怎么禁选
如果 label 里只有文字（比如 <label>用户名</label>），且你真想禁选这段文字：
立即学习“前端免费学习笔记（深入）”；
- 必须显式给
label本身加完整前缀样式：-webkit-user-select: none; -moz-user-select: none; user-select: none; - 移动端 Safari 长按时仍会弹菜单，必须额外加
-webkit-touch-callout: none; - 若
label内含链接或按钮，记得单独加pointer-events: auto，否则点不动
表格中 label + 表单控件的典型陷阱
表格里每行一个 label + input 是高频场景，最容易踩的坑是：
-
for值和input的id不完全一致（大小写、连字符、空格错一位都失效） - 动态渲染时重复生成相同
id，导致for总指向第一个匹配项 - 误以为给
<table no-select>加全局样式就能覆盖所有label和input，结果input依然可选
真正麻烦的从来不是“怎么写”，而是“写在哪”和“写给谁”。label 是语义桥梁，不是样式容器；禁选动作必须落到具体可交互节点上，且要考虑表单控件自身的规则边界。
