peer-checked 失效主因是 DOM 结构不合规：input 与目标元素必须同级、紧邻（无换行/空格）、共父容器，且 input 必须有 name 属性；sr-only 是唯一可靠的隐藏方式，display: none 和 opacity-0 均会导致失效。
peer-checked 失效最常踩的 DOM 顺序坑
peer-checked 不是“监听整个表单”，它只认紧邻的后续兄弟节点。只要中间插了一个空格、换行、<label> 包裹，或父容器不同级，样式就完全不触发。
-
<input type="checkbox" class="peer">和<div class="peer-checked:bg-blue-500">必须同属一个父元素，且<div>紧跟在<input>后面——中间不能有任何文本节点（包括换行符） - 错误结构：
<label><input type="checkbox" class="peer"></label><div class="peer-checked:bg-blue-500">→ input 和 div 不是兄弟，失效 - 更隐蔽的错误：
<input type="checkbox" class="peer">\n<div class="peer-checked:bg-blue-500">→ 换行生成匿名文本节点，部分浏览器（尤其是 Safari）直接跳过匹配 - 正确写法必须是：
<input type="checkbox" name="agree" class="peer sr-only"><div class="peer-checked:bg-blue-500">，零间隔、同级、有name
为什么一定要加 name 属性
没有 name 的 <input type="checkbox"> 在部分浏览器中无法稳定触发 :checked 状态，导致 peer-checked 完全失联。这不是可选优化，而是硬性依赖。
-
name是浏览器识别表单控件“可交互状态”的关键标识，哪怕只用一个复选框也要写，例如：<input type="checkbox" name="terms" class="peer sr-only"> - 省略
name后，Chrome 可能偶尔生效，但 Safari 和 Firefox 往往静默失败，且热更新后行为更不稳定 - radio 组更严格：多个
radio共享同一name才能互斥；peer-checked 也只对当前被选中的那个 radio 生效，其余同名 radio 的后续兄弟不受影响
sr-only 为什么比 hidden 或 opacity-0 更可靠
hidden 会让元素脱离渲染树，opacity-0 虽然视觉隐藏但可能阻断焦点和状态检测——这两者都会让 peer-checked 在 Safari 中彻底失效。
-
sr-only是 Tailwind 内置的语义化隐藏工具，通过position: absolute; clip: rect(1px, 1px, 1px, 1px);实现，元素仍可聚焦、可检查、可被 CSS 伪类监听 -
display: none→ 直接从 DOM 渲染流程中移除，:checked状态无法被读取，peer-checked 必然不工作 -
opacity-0→ 元素还在，但某些浏览器（特别是旧版 Safari）会跳过对其状态变更的重绘监听，导致样式延迟或不响应
peer-checked 控制多个目标时的结构约束
一个 <input class="peer"> 可以联动多个后续兄弟，但所有目标必须连续、同级、无中断——不能靠父容器“分组”，也不能跨区块。
立即学习“前端免费学习笔记（深入）”；
- 合法结构：
<input type="checkbox" name="show" class="peer sr-only"><div class="peer-checked:block">A</div><div class="peer-checked:bg-gray-100">B</div><p class="peer-checked:text-sm">C</p> - 非法结构：
<input ...><div><div class="peer-checked:..."></div></div>→ 目标嵌套了，不是直接兄弟 - 非法结构：
<input ...><section><div class="peer-checked:..."></div></section><aside><div class="peer-checked:..."></div></aside>→ 目标不在同一父级下，中断了~选择器链
<div>、或者忘了加 name——这些细节一旦出错，peer-checked 就像没写一样，连控制台都报不出错。 
