CSS3: n-anak () pemilih
CSS penyeleksi referensi panduan lengkap
contoh
Menentukan setiap p elemen sesuai dengan warna background dari elemen induk dari sub-elemen kedua:
p:nth-child(2)
{
background:#ff0000;
}
{
background:#ff0000;
}
Coba »
Definisi dan Penggunaan
: N-anak (n) pemilih yang cocok elemen induk n elemen th.
ndapat berupa angka, kata kunci, atau rumus.
Tip: Lihat pemilih .pemilih sesuai dengan jenis yang sama dari saudara saudara n-th.
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
选择器 | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
contoh yang lebih
contoh 1
<P aneh dan bahkan dapat digunakan sebagai kata kunci untuk mencocokkan sub-elemen yang digunakan, indeks aneh atau bahkan (indeks dari anak pertama adalah 1). Di sini, kita tentukan dua warna latar belakang yang berbeda untuk unsur-unsur aneh dan bahkan p:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
Coba »
contoh 2
Menggunakan rumus (sebuah + b) Keterangan: Ukuran wakil dari siklus, N adalah counter (mulai dari 0), dan b offset. Di sini kita semua indeks adalah kelipatan tiga p elemen menspesifikasikan warna latar belakang:
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
Coba »