Verwenden Sie den CSS-Selektor „nth-child (odd)' mit Tailwind für das übergeordnete Element

Question

Ich versuche folgende Ziele zu erreichen:

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

Aber es ist nicht nötig, es einmal bei jedem tr 子标签上输入 css，而是在 table Tag einzugeben.

So etwas in der Art: (Übrigens bekomme ich es nicht zum Laufen)

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

Im Moment mache ich etwas Ähnliches, um es umzusetzen, aber wenn möglich würde ich das alles gerne mit der Tailwind-Klasse machen

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

Habe es auch versucht, aber kein Erfolg.

Ich habe ein Rückenwind-Spielbeispiel mit zwei Beispielen

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