상위 요소의 Tailwind와 함께 nth-child(odd) CSS 선택기를 사용하세요.

Question

저는 다음과 같은 목표를 달성하려고 노력하고 있습니다.

으아악

그러나 각 tr 子标签上输入 css，而是在 table 태그에 한 번만 입력할 필요는 없습니다.

다음과 같습니다: (하지만 작동시킬 수 없습니다)

으아악

지금은 구현하려고 비슷한 작업을 하고 있지만 가능하다면 모든 작업을 Tailwind 클래스로 하고 싶습니다

으아악

이것도 시도했지만 성공하지 못했습니다.

두 가지 예가 포함된 순풍 게임 예가 있습니다

Answer 1

순풍에는 언젠가 탐험해 볼 몇 가지 소품이 있습니다. 다음과 같이 자식의 상위 div에서 tailwind의 Even 속성을 사용할 수 있습니다.

으아아아

Answer 2

모든 변형을 사용해야 합니다. 간단히 말해서:

이 논리를 odd 和 even 子级，我们将使用 :nth-child(odd) 和 :nth-child(even) 선택기에 적용하여 다양한 배경색을 지정하려면:

으아아아

실제:

으아아아

Tailwind-play

---

이 방법은 div 和 li 요소에서는 제대로 작동하지만 테이블 요소에서는 작동하지 않는 것 같습니다...

사용자 Wongjn이 브라우저가 <tbody>元素。这就是为什么在选择奇数元素时对所有元素应用上述方法的原因。我们的选择器只选择了一个元素，即 <tbody> 요소를 삽입했다고 나에게 지적했습니다!

---

<tbody> 注入问题，我们可以更改选择器以选择 <tbody>의 자녀를 해결하려면:

으아아아

실제:

으아아아

Tailwind-Play

opensas에서 제안한 대로 수동으로 삽입할 수 있습니다. <tbody>:

으아아아