Gunakan pemilih kelas pseudo :nth-last-of-type(3) untuk memilih gaya elemen ketiga hingga terakhir antara jenis yang sama

Gunakan pemilih kelas semu :nth-last-of-type(3) untuk memilih gaya ketiga hingga terakhir di antara elemen jenis yang sama Contoh kod khusus diperlukan

Dalam CSS, kita sering memerlukan untuk memilih gaya elemen ketiga hingga terakhir dalam halaman web digayakan. Kadangkala, kita perlu memilih elemen ketiga hingga terakhir di antara jenis elemen yang sama dan menggunakan gaya tertentu padanya. Pada masa ini, kita boleh menggunakan pemilih kelas pseudo :nth-last-of-type(3) untuk menyelesaikan tugasan ini.

Mula-mula, mari kita lihat sintaks pemilih kelas semu :nth-last-of-type(3):

:nth-last-of-type(n)

Dalam kod di atas, n mewakili integer , menunjukkan bahawa kita ingin memilih elemen kedua terakhir. Dalam keperluan kami, kami perlu memilih elemen ketiga hingga terakhir, jadi kami menetapkan n kepada 3.

Seterusnya, mari lihat contoh khusus:

Kod HTML:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>

Kod CSS:

li:nth-last-of-type(3) {
    color: red;
    font-weight: bold;
}

Dalam contoh di atas, kami mempunyai senarai tidak tertib yang mengandungi 6 item senarai. Kami ingin memilih item senarai ketiga hingga terakhir dan menggunakan fon merah dan gaya tebal padanya. Kita boleh menggunakan pemilih :nth-last-of-type(3) untuk mencapai tujuan ini.

Apabila kami menjalankan kod di atas, item senarai 4 akan dipilih sebagai elemen ketiga hingga terakhir, dan fon merah serta gaya tebal akan digunakan. Item senarai lain tidak akan terjejas.

Peringatan di sini, apabila menggunakan pemilih :nth-last-of-type(3), kita perlu memberi perhatian kepada perhubungan hierarki pemilih. Jika elemen sasaran kita bukan elemen keturunan langsung, tetapi bersarang dalam elemen lain, maka kita perlu menyesuaikan cara pemilih ditulis mengikut situasi tertentu. Mengenai peraturan hierarki pemilih, anda boleh merujuk kepada spesifikasi pemilih CSS yang berkaitan.

Ringkasnya, menggunakan pemilih kelas pseudo :nth-last-of-type(3) boleh memilih elemen ketiga hingga terakhir dengan mudah antara jenis yang sama dan menggunakan gaya yang ditentukan padanya. Melalui contoh di atas, kita boleh mulakan dengan cepat dan memahami cara menggunakan pemilih ini, supaya dapat mengaplikasikannya dengan lebih baik dalam pembangunan sebenar.

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :nth-last-of-type(3) untuk memilih gaya elemen ketiga hingga terakhir antara jenis yang sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!