Utilisez le sélecteur CSS nth-child (impair) avec Tailwind sur l'élément parent

Question

J'essaie d'atteindre les objectifs suivants :

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

Mais pas besoin de le saisir une fois sur chaque tag tr 子标签上输入 css，而是在 table.

Quelque chose comme ça : (BTW, je n'arrive pas à le faire fonctionner)

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

En ce moment, je fais quelque chose de similaire pour l'implémenter, mais si possible, j'aimerais tout faire avec la classe 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>

J'ai également essayé ceci mais sans succès.

J'ai un exemple de jeu de vent arrière avec deux exemples

Answer 1

Il y a quelques accessoires dans le vent arrière que j'explorerai un jour. Vous pouvez utiliser l'attribut Even de tailwind dans le div parent de son enfant comme ceci :

      

        {/* Content*/}
      

Answer 2

Vous devez utiliser n'importe quelle variante. En termes simples :

Pour appliquer cette logique aux odd 和 even 子级，我们将使用 :nth-child(odd) 和 :nth-child(even) sélecteurs, en leur donnant différentes couleurs de fond :

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

En pratique :

  
1
  
2
  
3
  
4
  
5

Tailwind-play

---

Bien que cette méthode fonctionne bien sur les éléments div 和 li, elle ne semble pas fonctionner sur les éléments de table...

L'utilisateur Wongjn m'a fait remarquer que le navigateur avait injecté l'élément <tbody>元素。这就是为什么在选择奇数元素时对所有元素应用上述方法的原因。我们的选择器只选择了一个元素，即 <tbody> !

---

Pour résoudre les enfants de <tbody> 注入问题，我们可以更改选择器以选择 <tbody> :

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

En pratique :

name	title1
name	title1
name	title1

Tailwind-Play

Comme opensas le suggère, il peut être inséré manuellement <tbody> :

  

    

      
name
      
title1
    
    

      
name
      
title1
    
    

      
name
      
title1