Bagaimana untuk Memilih Anak Terakhir Tanpa Kelas Tertentu dalam CSS?

Menggabungkan :last-child dengan :not(.class) Selector dalam CSS

Memilih anak terakhir yang tidak mempunyai ciri khusus atribut kelas mungkin kelihatan seperti tugas yang mudah, tetapi ia memberikan cabaran dalam CSS.

Isu:

Pertimbangkan struktur HTML berikut:

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

Matlamatnya adalah untuk memilih baris ketiga, iaitu anak terakhir tanpa kelas "table_vert_controls". Walau bagaimanapun, pemilih berikut tidak berfungsi:

tr:not(.table_vert_controls):last-child

Penghadan Pemilih CSS:

Pemilih CSS, termasuk :anak terakhir, secara khusus menyasarkan anak terakhir daripada sesuatu unsur. Walau bagaimanapun, tiada kelas pseudo yang setara untuk memilih anak terakhir unsur yang tidak mempunyai kelas tertentu.

Penyelesaian Menggunakan Pemilih 4:

Lewat 2015, Selectors 4 memperkenalkan sambungan kepada :last-child yang membenarkan menghantar pemilih arbitrari sebagai hujah. Ini membolehkan pemilih berikut:

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

Sokongan Penyemak Imbas:

Walaupun sesetengah penyemak imbas telah mula melaksanakan pelanjutan ini, sambungan itu masih tidak disokong secara meluas.

Penyelesaian Alternatif:

Sehingga sambungan ini disokong secara lebih meluas, pendekatan alternatif termasuk:

• Menambah kelas tambahan sebelum kelas "table_vert_controls"
• Menggunakan jQuery: $(tr:not(.table_vert_controls):last)

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