peer仅作用于同级紧邻后续兄弟元素，group则作用于后代任意层级；peer解决表单控件影响同级元素问题，group解决容器状态影响后代问题。

peer只认同级紧邻的后续兄弟元素

peer 的作用范围非常严格：它必须和目标元素在同一个父容器里，且目标元素得紧挨在 peer 元素后面（中间不能有空格、换行、注释或任何其他节点）。peer-checked 这类修饰符实际编译成 CSS 的 ~（通用兄弟选择器），不是 +（相邻兄弟），但依然要求“同级+顺序在后”。

常见失效场景：

• → input 被 label 包住，和 div 不是兄弟，失效
• \n
  → 换行产生匿名文本节点，部分浏览器下中断“紧邻”关系
• input 缺少 name 属性 → :checked 状态不稳定，peer-checked 不触发
• 用 hidden 或 opacity-0 隐藏 input → Safari 等浏览器可能跳过状态检测，推荐用 sr-only

group 作用于后代，不依赖 DOM 顺序

group 是容器级作用域标记，加在父元素上，所有后代元素都可以用 group-hover、group-focus 等响应其状态。它不要求子元素位置连续，也不限制层级深度。

比如按钮嵌套三层 div 后才出现，传统 hover 写法要写 group-hover:[&>*:nth-child(3)]:opacity-100，而用 group 只需：

...

。

注意点：

• group 只影响**后代**，无法控制同级或父级元素
• 想让 group 触发更复杂的状态（如单选切换多个远端区块），需配合 group-data-[state]（需启用 data-* variant 插件）
• 如果结构允许，优先用 peer-checked 实现零 JS 表单联动；只有当目标元素不在 peer 后续兄弟链上时，才考虑 group + 数据驱动方案

peer 和 group 不能混用替代对方

它们解决的是两类不同问题：peer 解决“一个表单控件状态影响它后面同级元素”的问题；group 解决“容器状态影响其内部任意后代”的问题。强行用 group 模拟 peer 行为，往往需要额外 wrapper 包裹，反而增加 DOM 复杂度。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

典型误用：

• 给 checkbox 加 group，然后指望 group-checked 控制隔壁 section 里的提示文字 → 失效，因为跨父容器
• 把 radio 放进
  ，再在外部写

  → group 不作用于外部元素
• 以为 peer-hover 能像 group-hover 那样响应整个区域悬停 → 不行，peer-hover 只在鼠标真正悬停到那个 peer 元素本身时才触发

什么时候该选 peer，什么时候该选 group

判断依据就一条：目标元素和触发源是不是**同级且后续兄弟**？是 → 用 peer；否 → 看能不能把它们一起包进同一个父容器 → 能 → 用 group；不能（比如分散在不同组件、不同 section）→ 就得靠 JS 控制 class 或 data 属性，Tailwind 本身无解。

容易被忽略的关键细节：

• peer 类本身不产生样式，只是个锚点；真正起效的是带 peer- 前缀的工具类，缺一不可
• group 的状态监听依赖元素是否获得焦点、悬停等原生行为，而 peer-checked 依赖的是表单控件的 checked 状态，二者底层机制不同
• 动画支持差异大：peer-checked:height-0 无效（height 不可过渡），得换 peer-checked:max-h-0 + overflow-hidden；group-hover 同理