Tailwind不支持原生子选择器>，仅能通过group-[>_button]等变体模拟直接子元素样式，且要求父元素带group类、目标为直接子级、浏览器需Chrome 105+/Safari 15.4+支持。
子元素选择器（>）在Tailwind里根本不能直接写
Tailwind 不生成 > 这类原生 CSS 子选择器规则——它只处理单个元素的原子样式，不描述父子关系。你写 div > p 这种选择器，Tailwind 会完全忽略；想靠 class="p-4" 和 class="parent > child" 混用？语法不合法，编译直接报错或静默跳过。
真正能模拟“仅作用于直接子元素”的方式只有 group + 变体
要用 Tailwind 控制某容器的**直接子元素**（比如只给 .card 下第一层 button 加样式，不波及嵌套更深的），必须用 group 配合 group-[>_button] 这类变体：
-
group必须加在父容器上，且该容器是目标子元素的**直接父级** - 内部选择器必须以
>_开头，_是 Tailwind 的占位符，代表“当前 group 元素下的直接子元素” - 不支持
> div > span这种多层，只能>_button或>_div - 浏览器兼容性同
:has()，Chrome 105+/Safari 15.4+/Firefox 121+ 才生效；旧版 Safari 会整条规则失效
示例：<div class="group"><button>只这里变色</button><div><button>这不会变</button></div></div>，配合 group-[>_button]:bg-blue-500。
first: / last: 看的是 DOM 顺序，不是视觉层级
first: 和 last: 变体本质是 :first-child / :last-child，只认 HTML 中第一个/最后一个子节点，和标签类型无关：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器开头有注释、空格文本节点或
<div class="wrapper">，first:mt-0就不会作用在你想控制的那个li上 - React 中
{items.map(...)}返回的数组如果没用Fragment或key包裹，渲染出的每个div可能是唯一子元素，导致first:失效 - 要按标签类型匹配（如“第一个
p”），得用first-of-type:，需确认配置中已启用（v3.3+ 默认开）
任意值类（如 w-[80px]）和子选择逻辑容易互相干扰
当你在 group 容器里混用任意值类和结构变体时，优先级可能翻车：
-
group-[>_button]:w-[80px]生效的前提是该 button 是 group 的直接子元素；如果中间隔了 wrapper，整个变体就失效 -
w-[80px]本身特异性低，若同时写了w-full，后者可能覆盖前者——此时得用[&]:w-[80px]提升特异性，而不是指望变体兜底 - 别把
group-[>_button]:[&]:w-[80px]当成常规写法，嵌套过深会让构建产物体积上涨，也难 debug
真正容易被忽略的是：所有这些“子元素控制”能力都依赖精确的 HTML 结构。DOM 层级差一级，样式就断掉；浏览器版本低一级，功能就静默消失。调试时别只看 class 名是否写对，得打开 DevTools 的 “Computed” 面板，确认那条 CSS 规则是否真被应用了。
