: Kanak-kanak terakhir digunakan untuk memilih elemen anak terakhir di bawah elemen induk, dan jenis mesti sepadan. Sebagai contoh, Li: Kanak-kanak terakhir boleh mengeluarkan sempadan Li yang terakhir; Tetapi jika elemen kanak -kanak yang terakhir bukan jenis yang ditentukan, ia tidak akan berkuatkuasa. Penggunaan yang disyorkan termasuk senario seperti mengeluarkan sempadan item terakhir senarai, dan item terakhir boleh dikecualikan oleh: tidak (: anak terakhir). : nth-child (n) fleksibel memilih elemen kanak-kanak n. n boleh menjadi nombor, ganjil/walaupun atau ungkapan, seperti tr: nth-child (walaupun) menetapkan warna latar belakang baris ganjil meja. Nota: Ia berdasarkan kepada semua unsur-unsur kanak-kanak, unsur-unsur yang tidak sama juga dikira dalam rangka, dan N bermula pada 0. Kesalahpahaman umum termasuk perubahan struktur yang mempengaruhi gaya, kekeliruan dengan: jenis terakhir, dan kesilapan menulis ekspresi. Kaedah untuk mengelakkan perangkap adalah pilihan: Nth-of-type, gunakan alat ujian untuk mengesahkan ungkapan, dan elakkan membuat gaya utama pada pergantungan kandungan dinamik pada susunan struktur. Menguasai kelas pseudo ini dapat mengurangkan operasi JS dan kelas dan meningkatkan kecekapan susun atur CSS.

Kadang -kadang anda ingin memilih elemen secara berasingan, seperti elemen anak terakhir atau terakhir, dan kemudian pemilih CSS biasa mungkin tidak mencukupi. CSS menyediakan beberapa kelas pseudo, seperti :last-child dan :nth-child , yang khusus digunakan untuk menangani situasi seperti itu.

Cara Menggunakan :last-child untuk memilih elemen kanak-kanak yang terakhir?

Fungsi :last-child adalah untuk memilih elemen anak terakhir di bawah elemen induk. Premisnya adalah bahawa elemen ini mesti benar -benar "terakhir" dan jenis mesti sepadan.

Sebagai contoh, jika anda mempunyai satu set <li> elemen yang dibungkus <ul></ul> dan mahu yang terakhir <li> tidak memaparkan sempadan:

 li: anak terakhir {
  Sempadan-bawah: Tiada;
}

Dengan cara ini, ia melangkau kerumitan melintasi DOM atau menambah kelas tambahan. Tetapi sedar: jika elemen kanak -kanak yang terakhir tidak <li> tetapi tag lain, seperti <div> , maka peraturan ini tidak akan berkuatkuasa.

Penggunaan yang disyorkan:

<li> Digunakan untuk menghilangkan senario biasa seperti sempadan dan jarak dalam item terakhir senarai.<li> Pastikan elemen sasaran sememangnya elemen kanak -kanak yang terakhir, jika tidak, ia tidak akan berkuatkuasa.<li> Jika anda ingin mengecualikan yang terakhir, bukan hanya memilihnya, gunakan :not(:last-child) .

Cara Menggunakan :nth-child to Flexibly memilih elemen kanak-kanak di lokasi tertentu?

:nth-child(n) lebih fleksibel, dan elemen kanak-kanak nth boleh dipilih. n boleh menjadi nombor, kata kunci (seperti odd , even ) atau ungkapan (seperti 2n 1 ).

Sebagai contoh, jika anda ingin menukar warna latar setiap baris lain untuk membezakannya, anda boleh menulisnya seperti ini:

 tr: nth-child (walaupun) {
  latar belakang warna: #f2f2f2;
}

Sebagai contoh, jika anda ingin memilih yang ketiga <div> , anda boleh menulisnya sebagai:

 Div: nth-child (3) {
  warna: merah;
}

Perkara yang perlu diperhatikan:

<li> :nth-child didasarkan pada semua elemen kanak-kanak di bawah elemen induk untuk mengira pesanan, bukan hanya elemen jenis yang sama. <li> n Dalam ungkapan dari 0, jadi 2n 1 sebenarnya adalah istilah yang ganjil. <li> Kata kunci odd dan even sangat mudah, sesuai untuk adegan seperti jadual dan senarai gambar yang memerlukan gaya bergantian.

Apakah tempat yang mudah untuk terjebak apabila menggunakan kelas pseudo ini?

Walaupun kedua-dua kelas pseudo ini mudah digunakan, terdapat beberapa butiran yang terdedah kepada kesilapan:

<li> Jika urutan elemen kanak -kanak berubah, gaya juga akan berubah : contohnya, jika anda memasukkan elemen baru ke dalam HTML, ia boleh menyebabkan kedudukan elemen yang dipilih pada asalnya berubah, dengan itu mempengaruhi gaya. <li> Keliru dengan :last-of-type dan :nth-of-type :: :last-child memerlukannya menjadi elemen anak terakhir, sementara :last-of-type adalah selagi ia adalah jenis terakhir. <li> Ekspresi mudah untuk membuat kesilapan : Sebagai contoh, n 3 bermaksud untuk memilih dari item 3, manakala 3n adalah memilih setiap tiga item.

Untuk mengelakkan masalah ini:

<li> Apabila anda tidak pasti sama ada struktur itu tetap, gunakan :nth-of-type terlebih dahulu. <li> Apabila menulis ungkapan, anda boleh mencari "alat ujian kelas pseudo" dalam talian untuk mengesahkan kesannya. <li> Cuba untuk mengelakkan bergantung pada susunan struktur untuk membuat gaya utama, terutamanya kandungan dinamik.

Pada dasarnya itu sahaja. Kelas pseudo adalah fungsi kecil, tetapi mereka sangat praktikal dalam pembangunan sebenar. Menguasai mereka boleh membantu anda menulis kurang JS dan menambah kelas kurang, dan menyelesaikan banyak masalah susun atur secara langsung melalui CSS.

Atas ialah kandungan terperinci Menggunakan kelas pseudo CSS seperti `: anak-anak terakhir` atau`: nth-child`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!