group 必须与 group-hover 成对使用，group 作状态锚点，group-hover 仅作用于其直接子元素；group-odd/even 依赖 DOM 兄弟顺序；移动端需配合 focus/active 确保可访问性。
group 和 group-hover 必须成对出现，否则 hover 样式不生效
直接给父容器加 hover:text-white，子元素不会变色——因为伪类状态不继承，且 Tailwind 的 hover: 只作用于当前元素自身。真正起效的组合是：group（父容器） + group-hover:text-white（子元素）。group 本身无样式，仅作状态锚点；group-hover: 则告诉 Tailwind：“当它的祖先中有带 group 类的容器被悬停时，才启用这个样式”。
常见错误现象：
-
span颜色不变 -
hover:仍只响应鼠标直接落在span上，和父容器无关
正确写法示例：
<div class="group p-4 rounded-lg border"> <h3 class="text-lg group-hover:text-blue-600">标题</h3> <p class="text-gray-600 group-hover:text-gray-800">描述文字</p> <button class="mt-2 px-3 py-1 bg-gray-200 group-hover:bg-blue-500">操作</button> </div>
group-hover 不支持嵌套层级穿透，只认直系子元素
group-hover: 的作用范围严格限定在带 group 类的**直接子元素**上。如果中间隔了一层 wrapper，比如 span 上的 group-hover: 将完全失效——因为它不是 .group 的子元素，而是孙元素。
解决方式只有两个：
- 扁平化 DOM：删掉不必要的 wrapper 层，让目标元素成为
.group的直系子元素 - 提升 group 位置：把
group加到更外层容器上，确保目标元素是其子元素（例如加在.wrapper上）
注意：group-hover: 不会像 CSS 的 :has() 那样向上查找任意深度的祖先，它只识别最近的那个 group 祖先，且只影响其子元素。
group-odd / group-even 要求父容器有明确的“组内顺序”，不能靠 flex/grid 视觉排列
group-odd: 和 group-even: 是 group 的结构性变体，它们依赖 DOM 中的兄弟节点顺序（编译为 :nth-child(odd)），而非视觉布局。这意味着即使你在 flex 或 grid 容器里把元素排成三列，只要它们在 HTML 中是连续的兄弟节点，group-odd: 就能正常计数。
但容易出错的地方在于：
- React/Vue 中用
map渲染时，若包裹了额外，会导致所有项变成一个子元素，group-odd:失效- DOM 中存在注释、空格文本节点或隐藏元素（如
hidden的），也会干扰nth-child计数group-odd:必须写在父容器上，子元素用group-odd:bg-gray-50这类形式，不能反着来典型安全写法：
<div class="group [&>*]:py-2"> <div class="group-odd:bg-gray-50 group-even:bg-white">第1项</div> <div class="group-odd:bg-gray-50 group-even:bg-white">第2项</div> <div class="group-odd:bg-gray-50 group-even:bg-white">第3项</div> </div>
group-hover 在移动端无 hover 行为，需搭配 focus 或点击反馈
在纯触摸设备（如 iPhone、iPad）上，
group-hover:几乎不会触发——因为没有“悬停”这个概念。用户第一次点击时可能短暂触发:hover，但第二次起就不再响应。如果你依赖group-hover做关键交互反馈（比如展开菜单、高亮操作项），必须补充键盘可访问性与触摸兼容方案。推荐做法：
- 对可交互区域（如按钮、卡片）加
tabindex="0"，确保键盘用户能聚焦 - 同时使用
group-focus:或group-active:，覆盖触摸/键盘场景 - 避免单独依赖
group-hover:实现核心功能，比如“点击前不可见”的操作按钮
例如，一个需要触达的操作面板：
<div class="group focus-within:shadow-md"> <button class="group-hover:bg-blue-500 group-focus:bg-blue-500">编辑</button> <div class="group-hover:block hidden">高级设置</div> </div>
这里用了
focus-within:替代纯group-hover:，更可靠。真正难处理的是跨组件、跨层级的状态联动——
group机制只管 DOM 树上的父子关系，一旦状态要跨越portal、shadow DOM或异步加载的子树，就得切回原生 CSS 选择器或 JS 控制类名。 - DOM 中存在注释、空格文本节点或隐藏元素（如
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
