在父元素上使用带有 Tailwind 的 nth-child(odd) css 选择器

Question

我正在努力实现以下目标：

<table>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr class="odd:bg-white even:bg-slate-100">
    <td>name</td>
    <td>title1</td>
  </tr>
</table>

但无需在每个 tr 子标签上输入 css，而是在 table 标签上输入一次。

像这样的东西：（顺便说一句，我无法让它工作）

<table class="--odd:bg-white even:bg-slate-100 [&:nth-child(odd)]:bg-gray-400">
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>name</td>
    <td>title1</td>
  </tr>
</table>

现在我正在做类似的事情来实现它，但如果可能的话，我想用顺风类来完成这一切

<style lang="postcss">
    div.plan-details :nth-child(odd) {
        @apply text-zinc-500;
    }
    div.plan-details :nth-child(even) {
        @apply text-zinc-900;
    }
</style>

也尝试过这个，但没有成功。

我有一个顺风游戏示例，其中包含两个示例

Answer 1

在 tailwind 中，有几个 props 有一天会探索一下。您可以在其子级的父 div 中使用 tailwind 的 Even 属性，如下所示：

      

        {/* Content*/}
      

Answer 2

您需要使用任意变体。简单来说：

要将此逻辑应用于 odd 和 even 子级，我们将使用 :nth-child(odd) 和 :nth-child(even) 选择器，为它们提供不同的背景颜色：

[&>*:nth-child(odd)]:bg-blue-500
[&>*:nth-child(even)]:bg-red-500

实践中：

  
1
  
2
  
3
  
4
  
5

Tailwind-play

---

虽然此方法在 div 和 li 元素上运行良好，但它似乎不适用于表格元素...

用户Wongjn向我指出浏览器注入了<tbody>元素。这就是为什么在选择奇数元素时对所有元素应用上述方法的原因。我们的选择器只选择了一个元素，即 <tbody> 元素！

---

要解决 <tbody> 注入问题，我们可以更改选择器以选择 <tbody> 的子级：

[&>tbody>*:nth-child(odd)]

实践中：

  

    
name
    
title1
  
  

    
name
    
title1
  
  

    
name
    
title1
  

Tailwind-Play

正如opensas建议的那样，可以手动插入<tbody>：

  

    

      
name
      
title1
    
    

      
name
      
title1
    
    

      
name
      
title1