Gunakan pemilih css nth-child(odd) dengan Tailwind pada elemen induk

Question

Saya cuba mencapai matlamat berikut:

<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>

Tetapi tidak perlu memasukkannya sekali pada setiap tag tr 子标签上输入 css，而是在 table.

Sesuatu seperti ini: (btw saya tidak dapat membuatnya berfungsi)

<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>

Sekarang saya melakukan sesuatu yang serupa untuk melaksanakannya, tetapi jika boleh saya ingin melakukan semuanya dengan kelas Tailwind

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

Juga mencuba ini tetapi tidak berjaya.

Saya mempunyai contoh permainan tailwind dengan dua contoh

Answer 1

Ada beberapa prop dalam tailwind yang akan saya terokai suatu hari nanti. Anda boleh menggunakan atribut Even tailwind dalam div induk anaknya seperti ini:

      

        {/* Content*/}
      

Answer 2

Anda perlu menggunakan sebarang variasi. Secara ringkasnya:

Untuk menggunakan logik ini pada odd 和 even 子级，我们将使用 :nth-child(odd) 和 :nth-child(even) pemilih, memberikan mereka warna latar belakang yang berbeza:

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

Dalam amalan:

  
1
  
2
  
3
  
4
  
5

Tailwind-play

---

Walaupun kaedah ini berfungsi dengan baik pada div 和 li elemen, ia nampaknya tidak berfungsi pada elemen jadual...

Pengguna Wongjn menunjukkan kepada saya bahawa penyemak imbas menyuntik elemen <tbody>元素。这就是为什么在选择奇数元素时对所有元素应用上述方法的原因。我们的选择器只选择了一个元素，即 <tbody>!

---

Untuk menyelesaikan anak-anak <tbody> 注入问题，我们可以更改选择器以选择 <tbody>:

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

Dalam amalan:

  

    
name
    
title1
  
  

    
name
    
title1
  
  

    
name
    
title1
  

Tailwind-Play

Seperti yang dicadangkan opensas, ia boleh dimasukkan secara manual <tbody>:

  

    

      
name
      
title1
    
    

      
name
      
title1
    
    

      
name
      
title1