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

也试过 this但它没有用。

我有这个tailwind play example两个例子

Answer 1

您需要使用 Arbitrary variants .简单地说:

& is self-referential which means children:pl-4 will result in .children\:pl-4 > * { .. }

将此逻辑应用于 odd和 even children ，我们将使用:nth-child(odd)和 :nth-child(even)选择器赋予它们不同的背景颜色:

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

在实践中:

<div class=" [&>*:nth-child(odd)]:bg-red-500 [&>*:nth-child(even)]:bg-blue-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Tailwind-play

---

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

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

Yes, the browser will often inject a <tbody> element between the <table> and elements if it does not exist, so the direct descendent selectors evaluate against the <tbody>, not the <tr> elements

---

解决 <tbody> 问题注入(inject)，我们可以改变选择器来选择 <tbody> 的 child :

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

在实践中:

<table class=" [&>tbody>*:nth-child(odd)]:bg-red-500 [&>tbody>*:nth-child(even)]:bg-blue-500">
  <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>

Tailwind-Play

作为opensas建议，可以插入 <tbody>手动:

That's great, I guess we could also explicitly add the tbody ourselves, to avoid that browser magic, like this: Tailwind-play

<table>
  <tbody class="[&>*:nth-child(odd)]:bg-red-500 [&>*:nth-child(even)]:bg-blue-500">
    <tr>
      <td>name</td>
      <td>title1</td>
    </tr>
    <tr>
      <td>name</td>
      <td>title1</td>
    </tr>
    <tr>
      <td>name</td>
      <td>title1</td>
    </tr>
  </tbody>
</table>