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
Ada beberapa prop dalam tailwind yang akan saya terokai suatu hari nanti. Anda boleh menggunakan atribut Even tailwind dalam div induk anaknya seperti ini:
Anda perlu menggunakan sebarang variasi. Secara ringkasnya:
Untuk menggunakan logik ini pada
odd
和even
子级,我们将使用:nth-child(odd)
和:nth-child(even)
pemilih, memberikan mereka warna latar belakang yang berbeza:Dalam amalan:
Tailwind-play
Walaupun kaedah ini berfungsi dengan baik pada
div
和li
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>
:Dalam amalan:
Tailwind-Play
Seperti yang dicadangkan opensas, ia boleh dimasukkan secara manual
<tbody>
: