Tailwind CSS中:first-child与任意变体的工作原理疑问

你之前对这个类的理解完全搞反了&的指向，核心要搞清楚Tailwind自定义选择器里&的含义：&代表的是拥有这个类的元素本身，而不是它的子元素。

拆解[&:first-child]:text-red-500的逻辑 #

这个类的意思是：当拥有该类的元素，是它父元素的第一个子元素时，才会应用text-red-500（文本红色）的样式。

对应到你的示例代码：

• 外层div加了[&:first-child]:text-red-500，但这个div本身没有文本内容，它的子元素是两个ul。哪怕这个div是它父元素的第一个子元素，你也看不到红色效果，因为样式是作用在div本身的。
• 第二个ul加了[&:first-child]:text-blue-500，但这个ul是div的第二个子元素，所以它不会触发这个样式；如果把这个ul挪到div的第一个位置，它就会变成蓝色文本。

编译后的CSS对照 #

Tailwind会把这个自定义类编译成常规CSS，比如[&:first-child]:text-red-500对应的CSS是：

.\[\&\:first-child\]\:text-red-500:first-child {
  color: rgb(239 68 68);
}

一眼就能看出来，样式是给拥有该类且是父元素第一个子元素的元素设置的。

如果你想实现“当前元素的第一个子元素变红” #

如果你的需求是让加类的元素的第一个子元素文本变红，应该这样写：[&>*:first-child]:text-red-500。

它的逻辑是：&代表当前元素，>*代表当前元素的所有直接子元素，:first-child筛选出第一个子元素，最终编译后的CSS是：

.\[\&\>\*\:first-child\]\:text-red-500 > *:first-child {
  color: rgb(239 68 68);
}

这样你的外层div加这个类后，第一个ul的文本就会变成红色了。

内容的提问来源于stack exchange，提问作者Ben