peer类本身不生效，它只是锚点标记；真正起作用的是peer-checked等带状态前缀的工具类，其失效主因是DOM结构不合规（必须同级紧邻、零间隔、有name属性）和隐藏方式错误（禁用display:none或opacity-0，须用sr-only）。
peer 类本身不生效——它根本就不是个“状态类”，只是个锚点标记。真正起作用的是 peer-checked、peer-focus 这类带状态前缀的工具类，而它们失效，几乎全是 DOM 结构或隐藏方式踩了硬坑。
DOM 必须同级紧邻，中间不能有换行或空格
浏览器会把换行符、缩进空格甚至 HTML 注释解析为文本节点，导致 <input class="peer"> 和后续 <div class="peer-checked:bg-blue-500"> 不再是“相邻兄弟”，CSS 的 ~ 选择器直接跳过匹配。
- 错误写法：
<input type="checkbox" name="agree" class="peer sr-only">\n<div class="peer-checked:bg-blue-500">…</div>（\n 是换行） - 正确写法：必须连写，零间隔：
<input type="checkbox" name="agree" class="peer sr-only"><div class="peer-checked:bg-blue-500">…</div> - 如果用
<label>包裹input，那input和目标元素就不是同级兄弟了，peer-checked彻底失效
input 必须带 name 属性，且不能用 display:none 或 opacity-0 隐藏
没 name 的 <input type="checkbox"> 在 Safari 和 Firefox 中大概率无法稳定触发 :checked，peer-checked 就成了摆设；而 display:none 会让元素脱离渲染树，opacity-0 在 iOS Safari 中常导致状态监听失灵。
- 必须写：
<input type="checkbox" name="agree" class="peer sr-only"> -
sr-only是唯一可靠方案——它保持元素可聚焦、可检测、可被伪类读取 - 别用
hidden属性，也别靠opacity-0或visibility:hidden隐藏，这些在部分浏览器中静默失败
目标元素必须在 peer 元素之后，且不能跨容器
peer-checked 只能控制严格位于其后、同父级的兄弟元素。一旦目标被包进另一个 <div>、挪到隔壁 <section>，或者插在中间的兄弟元素不是你预期的那个，样式就断联。
立即学习“前端免费学习笔记（深入）”；
- 有效结构：
<input class="peer sr-only"><span class="peer-checked:text-red-500"></span><button class="peer-checked:opacity-100"></button> - 无效结构：
<input class="peer sr-only"><div><span class="peer-checked:text-red-500"></span></div>（span不是input的直接兄弟） - 分散在
<header>和<main>的两个目标？peer完全无能为力，得换group+group-data-[state]或 JS
最麻烦的其实是看不见的问题：开发者工具里 DOM 看着“差不多”，但中间混了个文本节点，或 name 拼错了字母，或 sr-only 被自定义样式覆盖了——这些都会让 peer-checked 静默不工作，连报错都没有。
