HTML规范禁止在中嵌套<input>等交互元素，浏览器会静默修复DOM导致点击异常、样式失效、JS选择器失配；正确做法是用div+role="link"配合事件委托模拟可点击容器。
直接禁止在 <a> 里放 <input type="checkbox">、<button>、<select> 等交互元素——这不是“写法不优雅”，而是 HTML 规范明令禁止的非法结构，浏览器会静默修复 DOM，导致点击行为不可控、样式失效、JS 选择器失配。
为什么 <a> 里嵌 <input> 会出问题
HTML Living Standard 明确规定：<a> 元素不得包含任何交互式内容后代（interactive content descendants），而 <input> 就是其中之一。浏览器解析时不会报错，但会：
- 自动将 <input> 移出 <a>，变成兄弟节点
- 原本的点击区域逻辑断裂：用户点 checkbox 时不会触发 a 的跳转，但视觉上又像“可点击整块”
- CSS 中 a > input 选择器完全不生效，:focus-within 行为也变得不可预测
- SSR hydration 时服务端与客户端 DOM 结构不一致，React/Vue 可能抛出 mismatch warning
替代方案：用 JS 模拟“可点击容器”行为
若 UI 要求整个卡片可点击，且内部有独立 checkbox，正确做法是放弃语义嵌套，改用事件委托 + 显式控制：
<div class="card" role="link" tabindex="0" data-href="/detail">
<label class="card-checkbox">
<input type="checkbox" name="selected" value="123">
<span>选中此项</span>
</label>
<div class="card-content">...</div>
</div>
然后绑定 JS：
- 监听
click和keydown（Enter/Space），区分 target 是否为 checkbox； - 是 checkbox → 不阻止默认行为，让其自然切换状态；
- 否则 →
window.location.href = element.dataset.href； - 加上
role="link"和tabindex="0"保证键盘可访问性。
哪些嵌套组合必须立刻检查
以下结构在任意现代浏览器中都会被重写，不是“兼容性问题”，而是解析规则本身：
立即学习“前端免费学习笔记（深入）”；
-
<a><button>Click</button></a>→<button>被移出，<a>变成空链接； -
<button><input type="text"></button>→<input>被剥离，按钮失去焦点管理能力； -
<label><select></select></label>→ 若<label>未显式用for关联，浏览器可能忽略其语义，且<select>失去 label 的屏幕阅读器支持； -
<details><details>.../details>→ 内层<details>被截断，DOM 中只剩外层。
最常被忽略的是：模板引擎或 CMS 输出的 HTML 很少做规范校验，它们生成的 <p><div>...</div></p> 类似结构，和 <a><input> 一样，都是解析阶段就被重写的“伪合法”代码——别依赖 DevTools 里看到的结构，要用 W3C Validator 或 document.querySelectorAll('a:has(*)') 主动扫描非法后代。
