label点击不聚焦的主因是for与id未严格匹配或input不可聚焦，须确保字符串完全一致、元素存在且可交互，嵌套写法可规避此问题。
label 点击后不聚焦，90% 是因为 for 和 id 没对上，或者 input 本身不可聚焦。这不是浏览器 bug，而是 HTML 语义规则严格执行的结果——它只做字符串匹配，不校验逻辑、不兜底容错。
for 属性必须与 input 的 id 完全一致
浏览器只比对 for 值和 id 字符串是否逐字相等（区分大小写、空格、特殊字符），不检查元素是否存在或是否可聚焦。
-
for值不能是name、class或其他属性名；写成for="user_name"但id="username"就失效 - 动态生成的 input 必须在 DOM 渲染完成时已带稳定
id，React/Vue 中需确保id在挂载后存在，而非仅在 props 或 state 里 - 同一页面中多个元素不能共用一个
id，否则只有第一个被for匹配到的生效
嵌套写法更简单，且无需 id 和 for
把 input 直接放在 label 内部，点击 label 任意位置都会聚焦或切换控件，这是原生支持、零配置、无障碍友好的方式。
- 适用于
input[type="text"]、textarea、input[type="checkbox"]、input[type="radio"]等所有可交互表单控件 -
label内只能有一个表单控件，含多个时仅第一个响应；不要在里面塞button或a，会干扰事件流 - 如果后续要用 JS 获取该 input，仍建议加
name（提交必需），id可选但推荐加上便于选择器定位
为什么点了没反应？先查这三类硬性限制
即使结构正确，以下情况也会让 label 失效，且无任何错误提示：
立即学习“前端免费学习笔记（深入）”；
-
input被设了disabled—— 改用readonly可保留聚焦能力；type="hidden"或type="submit"本身不可聚焦，点击无效 - CSS 干预：
label { pointer-events: none; }或input { display: none; }或visibility: hidden都会阻断行为 - 移动端聚焦策略更严：若
<meta name="viewport">缺失width=device-width，或页面禁用了缩放（user-scalable=no），iOS Safari 可能拒绝聚焦非原生可聚焦元素
别指望 accesskey 或 autofocus 来“补救”
accesskey 不会让 label 点击后聚焦关联 input，它只尝试聚焦自身——而 label 默认不可聚焦，加 tabindex 后也需手动绑定事件，得不偿失；autofocus 是一次性加载行为，在 SPA、模态框、动态表单中基本不可靠，应改用 JS 的 .focus() 显式控制。
真正容易被忽略的是：label 的作用不是“美化文字”，它是聚焦与切换的语义锚点。只要结构干净、状态正常、CSS 不越界，它就一定生效——问题永远出在那些看不见的约束上，比如一个空格、一个驼峰命名、或一行被遗忘的 pointer-events: none。
