在父元素上使用帶有 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