Pemilih CSS mencari subset entiti berdasarkan penapis kelas
P粉293550575
P粉293550575 2023-09-06 23:21:53
0
1
513

Saya mempunyai jadual yang mengandungi set baris yang diwakili, dan dalam set jadual itu, beberapa baris mempunyai kategori "boleh diklik". Apa yang saya cuba lakukan ialah menggunakan gaya pada setiap baris ganjil yang mempunyai kategori "boleh diklik". Saya telah mencuba pelbagai pemilih, tetapi ia nampaknya hanya menggunakan gaya pada baris ganjil yang boleh diklik, yang ganjil apabila digunakan pada semua baris jadual, bukan sahaja yang mempunyai kelas "boleh diklik". Saya rasa saya memerlukan pemilih untuk mencari subset baris yang mempunyai kelas "boleh diklik" dan kemudian lelaran ke atas baris tersebut untuk bilangan kanak-kanak yang ganjil.

Jika baris 1, 4, 5, 7 dan 8 boleh diklik, maka saya mahu baris 4 dan 7 dianggap sebagai baris ganjil di sini. Walau bagaimanapun, nampaknya melihat pada 1(c),2,3,4(c),5(c),6,7(c),8(c),9,10 dan apabila mencari baris ganjil dengan boleh diklik ( Menggunakan c sebagai rujukan) Hanya 4, 8 dipilih kerana mereka berada pada kedudukan ganjil dalam keseluruhan set baris.

Saya mencuba banyak pemilih tetapi tidak berjaya. Saya berharap ini adalah senario yang mungkin dan seseorang boleh membantu saya dengan beberapa maklum balas atau penyelesaian jika boleh.

td { border-bottom: 1px solid #cdcdcd; width: 100px; } .clickable { font-weight: 600; font-size: 16px; } .clickable:nth-child(odd) { background-color: lightcoral; }
Dean Canada True
Fred Canada True
Sam Canada True
Gina Canada True
Sam Canada True
Alex Canada True
Eli Canada True
Emma Canada True
John Canada True
Sophie Canada True
Sarah Canada True

P粉293550575
P粉293550575

membalas semua (1)
P粉190883225

Ini yang anda cari:

tr:nth-child(even of .clickable) { background-color: lightcoral; }

Sumber jawapan datang darisini

Atau gunakan skrip java/jquery untuk sokongan pelayar luas:

$('tr.clickable').each(function(index, value) { if(index % 2 != 0) $(value).addClass('custom-bg'); });
td { border-bottom: 1px solid #cdcdcd; width: 100px; } .clickable { font-weight: 600; font-size: 16px; } .clickable.custom-bg { background-color: lightcoral; }
 
Dean Canada True
Fred Canada True
Sam Canada False
Gina Canada False
Sam Canada True
Alex Canada False
Eli Canada True
Emma Canada True
John Canada True
Sophie Canada False
Sarah Canada True
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!