Laksanakan pelbagai senario aplikasi CSS :nth-last-of-type pseudo-class pemilih

Untuk melaksanakan pelbagai senario aplikasi CSS :th-last-of-type pseudo-class selector, contoh kod khusus diperlukan

Dalam CSS, pemilih ialah perkara yang kami gunakan untuk memilih elemen HTML dan menggunakan gaya padanya. Selain pemilih asas biasa, seperti pemilih elemen, pemilih kelas dan pemilih ID, CSS juga menyediakan beberapa pemilih kelas pseudo untuk memilih elemen tertentu dengan lebih tepat.

Salah satu pemilih kelas pseudo yang biasa digunakan ialah:nth-last-of-type. Fungsinya adalah untuk memilih elemen adik beradik ke-n jenis yang ditentukan daripada yang terakhir. Dalam artikel ini, kami akan meneroka pelbagai senario aplikasi pemilih kelas pseudo :nth-last-of-type dan memberikan contoh kod terperinci.

1. Pilih elemen terakhir

Mula-mula, mari kita lihat senario aplikasi mudah, iaitu memilih elemen adik beradik terakhir daripada jenis yang ditentukan. Katakan kita mempunyai senarai HTML dan ingin memilih elemen perenggan terakhir di dalamnya dan menggunakan gaya padanya. Anda boleh menggunakan pemilih :nth-last-of-type(1) untuk mencapai:

p:nth-last-of-type(1) {
  color: red;
}

2. Pilih elemen kedua terakhir

Selain memilih elemen terakhir, kita juga boleh memilih elemen adik beradik kedua dari jenis yang ditentukan . Katakan kita mempunyai senarai HTML yang mengandungi lima elemen perenggan dan ingin memilih elemen perenggan kedua dan menggunakan gaya padanya. Gunakan pemilih :nth-last-of-type(2) untuk mencapai:

p:nth-last-of-type(2) {
  font-weight: bold;
  color: blue;
}

3. Pilih elemen pada kedudukan ganjil

:nth-last-of-type pemilih juga boleh digunakan untuk memilih saudara daripada jenis yang ditentukan di elemen kedudukan ganjil. Sebagai contoh, kami mempunyai senarai HTML yang mengandungi enam elemen perenggan, dan kami ingin memilih elemen perenggan pada kedudukan ganjil dan menggunakan gaya padanya. Anda boleh menggunakan pemilih :nth-last-of-type (ganjil) untuk mencapai:

p:nth-last-of-type(odd) {
  background-color: yellow;
}

4. Pilih elemen pada kedudukan genap

Begitu juga, kita juga boleh menggunakan pemilih :nth-last-of-type untuk memilih genap kedudukan Elemen adik beradik daripada jenis yang ditentukan. Sebagai contoh, kami mempunyai senarai HTML yang mengandungi enam elemen perenggan dan kami ingin memilih elemen perenggan yang terletak pada nombor genap dan menggunakan gaya padanya. Anda boleh menggunakan pemilih :nth-last-of-type(even) untuk mencapai:

p:nth-last-of-type(even) {
  background-color: pink;
}

5. Pilih julat elemen tertentu

:nth-last-of-type selector juga boleh digunakan dalam kombinasi dengan pemilih lain untuk memilih Julat tertentu elemen adik beradik daripada jenis yang ditentukan. Sebagai contoh, kami mempunyai senarai HTML yang mengandungi sepuluh elemen perenggan dan kami hanya mahu memilih elemen perenggan antara perenggan ke-3 dan ke-6 dan menggunakan gaya padanya. Ini boleh dicapai menggunakan pemilih :nth-last-of-type(n+3):nth-last-of-type(-n+6):

p:nth-last-of-type(n+3):nth-last-of-type(-n+6) {
  border: 1px solid black;
}

Ringkasan:

Dalam artikel ini, kami memperkenalkan CSS: Pelbagai senario aplikasi pemilih kelas pseudo jenis ke-terakhir dan contoh kod yang sepadan disediakan. Dengan menggunakan pemilih :nth-last-of-type, kita boleh memilih elemen adik beradik ke-n bagi jenis yang ditentukan dengan lebih tepat dan menggunakan gaya padanya. Saya harap artikel ini dapat membantu anda memahami dan menggunakan pemilih jenis ke-terakhir.

Atas ialah kandungan terperinci Laksanakan pelbagai senario aplikasi CSS :nth-last-of-type pseudo-class pemilih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!