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

WBOY
Lepaskan: 2023-11-20 16:41:04
asal
1217 orang telah melayarinya

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>
Salin selepas log masuk

Kod CSS:

li:nth-of-type(3n) {
  color: red;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan