如何在Tailwind CSS中使用nth-child选择器选中偶数子元素？

首先需要纠正你之前的CSS写法误区：你写的.parent:nth-child(2n)是选中**.parent元素自身作为它父元素的第2n个子元素**，而不是.parent内部的子div。正确的CSS写法应该是.parent > div:nth-child(2n)或者.parent > div:nth-child(even)，用来选中.parent下的第2、4、6...个div。

在Tailwind CSS中，有两种简单的实现方式：

方式一：使用内置的even:变体 #

Tailwind提供了内置的even:和odd:变体，分别对应:nth-child(even)和:nth-child(odd)。直接给子元素添加带even:前缀的样式类即可：

<div class="parent">
  <div class="p-4">第一个子元素</div>
  <div class="p-4 even:bg-blue-100">第二个子元素</div>
  <div class="p-4">第三个子元素</div>
  <div class="p-4 even:bg-blue-100">第四个子元素</div>
</div>

上面的代码会让第2、4个div拥有蓝色背景，你可以把bg-blue-100换成你需要的任意样式。

方式二：使用任意变体作用于父元素 #

如果不想给每个子元素单独加类，可以在父元素上使用Tailwind的任意变体语法，直接指定子元素的选择器：

<div class="parent [&>div:nth-child(2n)]:bg-blue-100">
  <div class="p-4">第一个子元素</div>
  <div class="p-4">第二个子元素</div>
  <div class="p-4">第三个子元素</div>
  <div class="p-4">第四个子元素</div>
</div>

这里的[&>div:nth-child(2n)]表示“选中当前元素下的第2n个直接子div”，后面的样式会直接应用到这些子元素上。如果需要更复杂的规则（比如3n+1），只需要把括号里的2n改成对应的表达式即可。

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