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

但无需在每个子标签上输入 css tr，而是在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

您需要使用任意变体。简而言之：

&是自我参照，这意味着children:pl-4将导致.children\:pl-4 > * { .. }

要将此逻辑应用于odd和even子级，我们将使用: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>

顺风游戏

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

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

是的，如果不存在，浏览器通常会在 和 元素<tbody>之间注入一个元素，因此直接后代选择器针对 进行评估，而不是针对元素<table><tbody><tr>

要解决注入问题<tbody>，我们可以更改选择器以选择 的子项<tbody>：

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

顺风游戏

正如opensas建议的那样，可以<tbody>手动插入：

太棒了，我想我们也可以自己显式添加 tbody，以避免浏览器魔法，如下所示：Tailwind-play

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