Gunakan pemilih kelas pseudo :nth-of-type untuk memilih gaya pada kedudukan tertentu dalam elemen jenis yang sama.

Gunakan pemilih kelas pseudo :nth-of-type untuk memilih gaya kedudukan tertentu dalam elemen jenis yang sama

Dalam CSS, kita selalunya perlu menggayakan kedudukan tertentu dalam elemen jenis yang sama, seperti as lists Setiap elemen ketiga dalam memerlukan gaya khas, dalam hal ini pemilih kelas pseudo :nth-of-type boleh digunakan untuk tujuan ini.

:pemilih kelas pseudo jenis kenth boleh memilih elemen sasaran berdasarkan jenis dan kedudukannya. Sintaksnya adalah seperti berikut:

:nth-of-type(n)

di mana n ialah parameter yang menunjukkan kedudukan, yang boleh menjadi nombor tertentu atau kata kunci Contohnya, ganjil mewakili kedudukan ganjil, dan juga mewakili kedudukan yang sekata.

Berikut ialah contoh khusus:

Kod HTML:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
  <li>第五个元素</li>
  <li>第六个元素</li>
  <li>第七个元素</li>
  <li>第八个元素</li>
</ul>

Kod CSS:

li:nth-of-type(3n) {
  color: red;
}

Dalam kod di atas, kami menggunakan pemilih :nth-of-type(3n) untuk memilih setiap elemen ketiga dalam senarai , dan tetapkan warna kepada merah. Mengikut peraturan pemilih ini, gaya ini akan digunakan pada elemen ketiga, keenam dan kesembilan.

Jika kita ingin memilih elemen pada kedudukan ganjil, kita boleh menggunakan pemilih :nth-of-type(odd) Kod sampel adalah seperti berikut:

Kod CSS:

li:nth-of-type(odd) {
  background-color: lightgray;
}

Dengan cara ini, warna latar belakang. elemen pada kedudukan ganjil dalam senarai akan Ditetapkan kepada kelabu muda.

Selain menggunakan pemilih :nth-of-type dalam senarai, ia juga boleh digunakan untuk jenis elemen lain, seperti perenggan, tajuk, dsb.

Ringkasnya, menggunakan pemilih kelas pseudo :nth-of-type boleh mencapai tujuan untuk menggayakan kedudukan tertentu dalam elemen jenis yang sama. Dengan menetapkan parameter tertentu, kami boleh memilih lokasi yang diingini dan menggunakan gaya tertentu padanya. Ini sangat berguna apabila berurusan dengan penggayaan sejumlah besar elemen serupa, meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :nth-of-type untuk memilih gaya pada kedudukan tertentu dalam elemen jenis yang sama.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!