Gunakan pemilih css nth-child(odd) dengan Tailwind pada elemen induk
P粉426780515
P粉426780515 2024-01-29 10:50:26
0
2
575

Saya cuba mencapai matlamat berikut:

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

Tetapi tidak perlu memasukkannya sekali pada setiap tag tr 子标签上输入 css,而是在 table.

Sesuatu seperti ini: (btw saya tidak dapat membuatnya berfungsi)

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

Sekarang saya melakukan sesuatu yang serupa untuk melaksanakannya, tetapi jika boleh saya ingin melakukan semuanya dengan kelas Tailwind

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

Juga mencuba ini tetapi tidak berjaya.

Saya mempunyai contoh permainan tailwind dengan dua contoh

P粉426780515
P粉426780515

membalas semua(2)
P粉413307845

Ada beberapa prop dalam tailwind yang akan saya terokai suatu hari nanti. Anda boleh menggunakan atribut Even tailwind dalam div induk anaknya seperti ini:

{/* Content*/}
P粉509383150

Anda perlu menggunakan sebarang variasi. Secara ringkasnya:

Untuk menggunakan logik ini pada oddeven 子级,我们将使用 :nth-child(odd):nth-child(even) pemilih, memberikan mereka warna latar belakang yang berbeza:

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

Dalam amalan:

1
2
3
4
5

Tailwind-play


Walaupun kaedah ini berfungsi dengan baik pada divli elemen, ia nampaknya tidak berfungsi pada elemen jadual...

Pengguna Wongjn menunjukkan kepada saya bahawa penyemak imbas menyuntik elemen <tbody>元素。这就是为什么在选择奇数元素时对所有元素应用上述方法的原因。我们的选择器只选择了一个元素,即 <tbody>!


Untuk menyelesaikan anak-anak <tbody> 注入问题,我们可以更改选择器以选择 <tbody>:

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

Dalam amalan:


name title1
name title1
name title1

Tailwind-Play

Seperti yang dicadangkan opensas, ia boleh dimasukkan secara manual <tbody>:

name title1
name title1
name title1
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan