CSS :nth-of-type() 伪类

定义和用法

CSS :nth-of-type(n) Pseudo-class digunakan untuk mencocokkan elemen anak yang sama jenis (nama tag) ke- n Elemen anak setiap elemen.

n boleh berupa angka/indeks, kata kunci (ganjil atau genap) atau formula (seperti an + b)

Petunjuk:Lihat :nth-child() Pseudo-class untuk memilih elemen anak yang ke- n Elemen anak, tanpa mengira jenisnya.

Contoh

Contoh 1

Bagaimana untuk digunakan :nth-of-type() Pemilih:

/* Pilih elemen kedua di antara saudara div */
div:nth-of-type(2) {
  background: red;
}
/* Pilih elemen li kedua di dalam daftar */
li:nth-of-type(2) {
  background: hijau terang;
}
/* Pilih setiap elemen ketiga di dalam setiap grup saudara */
:nth-of-type(3) {
  background: yellow;
}

Coba sendiri

Contoh 2

ganjil dan genap Adalah kata kunci, dapat digunakan untuk mencocokkan elemen dengan indeks genap atau ganjil (indeks elemen pertama adalah 1).

Di sini, kami menentukan warna latar belakang bagi elemen <p> yang indeksnya ganjil dan genap:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

Coba sendiri

Contoh 3

Dengan formula (an + b)a Mewakili penggeser integer, n adalah semua bilangan bulat non-negatif yang dimulai dari 0,b Adalah penggeser integer.

Di sini, kami menentukan warna latar belakang bagi semua elemen <p> yang indeksnya adalah kelipatan 3 (akan memilih ketiga, enam, sembilan, dll):

p:nth-of-type(3n+0) {
  background: red;
}

Coba sendiri

Contoh 4

Di sini, kami menentukan warna latar belakang bagi semua elemen <p> yang indeksnya adalah kelipatan 3. kemudian kami mengurangi 1 (akan memilih kedua, kelima, delapan, dll):

p:nth-of-type(3n-1) {
  background: red;
}

Coba sendiri

Syarat CSS

:nth-of-type(indeks | ganjil | genap | an+b) {
  pernyataan css;
}

Perincian teknologi

Dukungan pereka papan

Nombor di dalam tabel menunjukkan versi penuh penggunaan pseudo-class pertama pengguna pereka papan.