Bagaimanakah Saya Boleh Menggayakan Elemen Anak Terakhir dalam Senarai CSS?

Mensasarkan Anak Terakhir dengan CSS

Tugas menggayakan elemen terakhir dalam senarai kadangkala boleh mencabar. Pertimbangkan peraturan CSS berikut:

#refundReasonMenu #nav li:last-child {
  border-bottom: 1px solid #b5b5b5;
}

Malangnya, ia gagal mencapai tujuan yang dimaksudkan. Untuk memahami sebabnya, kita perlu meneliti sokongan penyemak imbas untuk kelas pseudo :last-child.

Had Sokongan Penyemak Imbas

Walaupun menjadi standard CSS3, :last-child pseudoclass masih menghadapi had dalam sesetengah pelayar. Terutama, versi Internet Explorer di bawah 9 dan versi Safari di bawah 3.2 kurang sokongan untuk pemilih ini.

Malah dalam penyemak imbas yang menyokong :last-child, seperti Internet Explorer 7 dan Safari 3.2, adalah penting untuk mengetahui bahawa rakan sejawatannya, :anak pertama, lebih banyak disokong dalam penyemak imbas ini.

Alternatif Penyelesaian

Untuk mengatasi pengehadan ini dan menyasarkan anak terakhir dengan pasti, adalah disyorkan untuk menambahkan kelas unik secara eksplisit, seperti "anak terakhir," pada item senarai akhir dan gunakan penggayaan khusus pada kelas tersebut :

li.last-child {
  border-bottom: 1px solid #b5b5b5;
}

Pendekatan ini menyediakan penggayaan yang konsisten dan boleh dipercayai merentas julat penyemak imbas yang lebih luas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Elemen Anak Terakhir dalam Senarai CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!