Gunakan pemilih kelas pseudo :nth-last-child(2) untuk memilih gaya elemen anak kedua hingga terakhir-tutorial css-php.cn

Gunakan pemilih kelas pseudo :nth-last-child(2) untuk memilih gaya elemen anak kedua hingga terakhir

WBOY

Lepaskan： 2023-11-20 11:22:47

asal

1721 orang telah melayarinya

Gunakan pemilih kelas pseudo :nth-last-child(2) untuk memilih gaya elemen anak kedua hingga terakhir

Gunakan pemilih kelas pseudo :nth-last-child(2) untuk memilih gaya elemen anak kedua terakhir Contoh kod khusus diperlukan

. #🎜🎜 #Dalam CSS, pemilih kelas pseudo ialah alat yang sangat berkuasa yang boleh digunakan untuk memilih elemen tertentu dalam pepohon dokumen. Salah satunya ialah pemilih kelas pseudo :nth-last-child(2), yang memilih elemen anak kedua hingga terakhir dan menggunakan gaya padanya.

Pertama, mari kita buat sampel dokumen HTML supaya kita boleh menggunakan pemilih kelas pseudo ini di dalamnya. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <style>
    ul li:nth-last-child(2) {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
    <li>第四个元素</li>
    <li>第五个元素</li>
    <li>第六个元素</li>
  </ul>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami telah mencipta senarai tidak tertib (ul) dan mengandungi beberapa item senarai (li). Kami memilih dan menggunakan gaya pada item senarai kedua hingga terakhir dengan menggunakan pemilih kelas pseudo :nth-last-child(2) dalam CSS. Dalam contoh ini, kami menetapkan warna fon item senarai kedua hingga terakhir kepada merah.

Apabila kita membuka sampel dokumen ini dalam penyemak imbas, kita akan mendapati bahawa warna fon item senarai kelima bertukar kepada merah kerana ia adalah item senarai kedua terakhir.

Dengan menggunakan pemilih kelas pseudo :nth-last-child(2), kami boleh memilih dan menggunakan gaya dengan mudah pada elemen anak kedua terakhir semasa membuat halaman web. Sama ada ia menyerlahkan pilihan kedua paling penting dalam menu navigasi atau menyerlahkan item kedua terakhir dalam senarai, pemilih pseudo ini boleh banyak membantu.

Disebabkan ini, adalah sangat penting untuk menguasai pemilih kelas pseudo dalam CSS, mereka boleh membawa kita lebih fleksibiliti dalam reka letak dan gaya. Saya harap contoh mudah ini dapat membantu anda lebih memahami dan menggunakan pemilih kelas pseudo :nth-last-child(2).

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :nth-last-child(2) untuk memilih gaya elemen anak kedua hingga terakhir. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!