peer-checked失效主因是DOM结构不合规：input与目标元素必须同父同级且紧邻、input必须有name属性、不可用display:none或opacity-0隐藏，推荐sr-only。
peer修饰符本身不触发任何状态，它只是为后续兄弟元素提供一个可被监听的上游锚点；真正起作用的是 peer-checked、peer-focus 这类带状态前缀的工具类，且必须满足严格的 DOM 结构约束。
peer-checked 为什么总不生效？检查这三点硬性条件
绝大多数失效问题都卡在这三个地方，不是 class 写错，而是结构没对：
-
input和目标元素必须同父、同级、且目标元素紧接在input后面——中间不能有换行、空格、注释或任何其他节点（包括<label>包裹） -
input必须带name属性，哪怕只有一个复选框或单选按钮也要写，例如<input type="checkbox" name="agree" class="peer sr-only"> -
input不能用hidden属性或display: none隐藏，推荐用sr-only；opacity-0在 Safari 中也常导致状态监听失败
如何让一个 checkbox 控制多个不同位置的兄弟元素？
一个 peer 可以联动多个后续兄弟，但每个目标都得单独加对应修饰符，且全部必须位于该 input 的同级之后：
- 所有目标元素（比如文字、提示、按钮）都要写成
peer-checked:xxx，不能只靠一个 class 批量控制 - DOM 顺序必须是：
<input class="peer sr-only">→<label class="peer-checked:text-blue-600">→<div class="peer-checked:block">→<button class="peer-checked:opacity-100"> - 如果目标分散在不同容器里（比如一个在
<header>，一个在<main>），peer 就完全失效——这时得改用group+group-data-[state]或 JS
移动端导航菜单用 peer-checked 滑入时为什么闪动或卡顿？
常见于 iOS Safari，根源是动画属性选择不当或布局干扰：
立即学习“前端免费学习笔记（深入）”；
- 别用
hidden切换显隐：hidden会触发重排，且无法过渡；改用translate-x-full+peer-checked:translate-x-0配合transition-transform -
nav必须设固定宽度（如w-64）和fixed或absolute定位，否则translate-x-full的位移基准不可控 - 高度不固定时，用
max-h-96+overflow-y-auto替代h-full，避免内容溢出或滚动异常 - 桌面端要用
lg:flex显式恢复布局，不能只依赖peer-checked:flex，否则缩放窗口时状态残留
peer 的边界很清晰：它只认紧邻兄弟，不跨层、不回溯、不处理动态插入的节点。一旦结构稍有偏差，样式就静默失效——这不是 bug，而是 CSS 选择器机制决定的。动手前先用浏览器开发者工具确认两个元素是否真正在同一父级下、中间有没有看不见的文本节点。
