Bolehkah Anda Memilih Elemen Anak Terakhir Tanpa Kelas Khusus dalam CSS?

Menggabungkan Pemilih :last-child dan :not(.class) dalam CSS

Dalam CSS, bolehkah seseorang memilih elemen anak terakhir yang tidak mempunyai kelas tertentu? Sebagai contoh, mempertimbangkan struktur HTML berikut:

<tr class="table_vert_controls"> ... </tr>
<tr class="table_vert_controls"> ... </tr>
<tr class="table_vert_controls"> ... </tr>
<tr> ... </tr>

Bagaimanakah anda boleh memilih hanya baris keempat menggunakan pemilih CSS? Percubaan untuk menggunakan pemilih berikut tidak akan mencukupi:

tr:not(.table_vert_controls):last-child

Malangnya, tidak mungkin untuk mencapainya menggunakan pemilih CSS sahaja. Kelas pseudo anak terakhir :last-child menyasarkan secara khusus anak yang paling terakhir, dan tiada kelas semu :last-of-class yang setanding.

Sehingga 2015, Selectors 4 memperkenalkan sambungan kepada :nth-child() dan :nth-last-child() pemilih, membolehkan penggunaan pemilih arbitrari sebagai hujah. Ini akan membenarkan sintaks berikut:

tr:nth-last-child(1 of :not(.table_vert_controls))

Walau bagaimanapun, setakat April 2018, hanya Safari yang menyokong ciri ini, jadi keserasian yang meluas masih beberapa tahun lagi.

Pendekatan Alternatif:

Untuk sementara, kaedah alternatif mesti digunakan:

• Menambah Kelas Tambahan: Tambah kelas sejurus sebelum kelas sasaran, dan kemudian pilih anak terakhir dengan kelas baharu itu.
• Pemilih jQuery: Gunakan pemilih jQuery:

$('tr:not(.table_vert_controls):last')

Atas ialah kandungan terperinci Bolehkah Anda Memilih Elemen Anak Terakhir Tanpa Kelas Khusus dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!