peer类本身不生效，它只是锚点标记；真正起作用的是peer-checked等带状态前缀的工具类，失效主因是dom结构不合规（必须同级紧邻、零间隔、有name属性）和隐藏方式错误（须用sr-only，禁用display:none或opacity-0）。
peer类本身不生效——它只是个锚点标记，真正起作用的是peer-checked、peer-focus这类带状态前缀的工具类；失效几乎全是 DOM 结构或隐藏方式踩了硬坑，不是 class 写错了。
检查 input 和目标元素是否真正在同一父级下、中间有没有看不见的文本节点
浏览器会把换行符、缩进空格、HTML 注释甚至 JS 注入的空白字符解析为文本节点，导致 <input class="peer"> 和后续 <div class="peer-checked:bg-blue-500"> 不再是“相邻兄弟”，CSS 的 <code>~ 选择器直接跳过匹配。
- 用浏览器开发者工具的 Elements 面板，右键点击 input 元素 → “Edit as HTML”，手动删掉它和目标元素之间的所有换行与空格，保存后看是否立刻生效
- 不要依赖代码格式化工具自动加的换行；生产环境建议连写：
<input type="checkbox" name="agree" class="peer sr-only"><div class="peer-checked:block">…</div> - 如果用了
<label></label>包裹 input，那 input 和目标就不是同级兄弟了——必须把目标移出<label></label>，放到同一父容器下、input 后面
确认 input 是否带 name 属性且未被 display:none 或 opacity-0 隐藏
没 name 的 <input type="checkbox"> 在 Safari 和 Firefox 中大概率无法稳定触发 :checked，peer-checked 就成了摆设；而 display:none 会让元素脱离渲染树，opacity-0 在 iOS Safari 中常导致状态监听失灵。
- 必须写
name，哪怕只有一个复选框：<input type="checkbox" name="terms" class="peer sr-only"> - 禁用
hidden属性、display: none、visibility: hidden、opacity-0；唯一可靠方案是sr-only - 如果自定义了
sr-only样式，检查是否被覆盖（比如加了!important的display: none）
验证目标元素是否严格位于 peer 元素之后、且未跨容器
peer-checked 只能控制紧接在 peer 元素之后、同父级的兄弟元素。一旦目标被包进另一个 <div>、挪到隔壁 <code><section></section>，或者中间插了别的兄弟节点，样式就断联。
- 有效结构：
<input class="peer sr-only"><button class="peer-checked:opacity-100"></button> - 无效结构：
<input class="peer sr-only"><div><button class="peer-checked:opacity-100"></button></div>（目标不在同级） - 分散在
<header></header>和<main></main>的两个目标？peer完全无能为力，得换group+group-data-[state]或 JS
最麻烦的是看不见的问题：DOM 看着“差不多”，但中间混了个文本节点，或 name 拼错了字母，或 sr-only 被自定义样式覆盖了——这些都会让 peer-checked 静默不工作，连报错都没。
