親要素の Tailwind で nth-child(odd) CSS セレクターを使用する

Question

私は次のことを達成しようとしています:

リーリー

ただし、各 tr 子タグに CSS を入力するのではなく、table タグに 1 回入力します。

このようなもの: (ところで、私はそれを機能させることができません)

リーリー

現在、同様の実装を行っていますが、可能であればすべて Tailwind クラスで実行したいと考えています

リーリー

これも試しましたが、成功しませんでした。

追い風ゲームの例として 2 つの例があります

Answer 1

追い風の中、いつか調査する小道具がいくつかあります。次のように、tailwind の Even 属性を子の親 div で使用できます。 リーリー

Answer 2

任意のバリエーションを使用する必要があります。簡単に言えば：＃＃＃ このロジックを

odd

と even の子に適用するには、 :nth-child(odd) と :nth-child(even) を使用します。 ) セレクター、異なる背景色を与える: リーリー ＃＃＃練習する：＃＃＃ リーリー

追い風プレイ

このメソッドは div

および

---

li

要素では正常に機能しますが、テーブル要素では機能しないようです... UserWongjn さんは、ブラウザが

<tbody>

要素を挿入していることを私に指摘しました。そのため、奇数の要素を選択する場合、上記の方法がすべての要素に適用されます。私たちのセレクターは 1 つの要素 (<tbody> 要素) のみを選択します。 <tbody>

インジェクションの問題を解決するには、

---

<tbody>

の子を選択するようにセレクタを変更します。 リーリー ＃＃＃練習する：＃＃＃ リーリー 追い風プレイ

opensas

が示唆したように、手動で

<tbody>: を挿入することが可能です。 リーリー