Memahami CSS :nth-child() Selector

Pembaca seperti anda membantu menyokong MUO. Apabila anda membuat pembelian menggunakan pautan di tapak kami, kami mungkin mendapat komisen ahli gabungan. Baca Lagi.

Seperti semua pemilih CSS, anda boleh menggunakan :nth-child() untuk mengenal pasti elemen dalam halaman web dan menggunakan gaya padanya. Tetapi pemilih ini membolehkan anda mengecilkan satu set adik beradik berdasarkan kedudukan relatif mereka.

aplikasi untuk mencari pakaian dari gambar

Video MUO pada hari itu SCROLL UNTUK MENERUSKAN KANDUNGAN

Pemilih menyokong beberapa kata kunci asas untuk kes biasa, tetapi ia juga menyediakan sintaks padanan corak yang berkuasa. Menggunakannya, anda boleh memilih elemen berdasarkan corak biasa, berulang atau definisi yang lebih kompleks, berdasarkan keperluan anda.

---

---

Sintaks Pemilih :nth-child().

Sebagai Pemilih kelas pseudo CSS , sintaks :nth-child() berbeza daripada pemilih lain. Ia memerlukan hujah sebagai corak untuk memadankan elemen dalam satu set adik-beradik:

 :nth-child(args) { 
    /*...*/ 
}

Fokus utama adalah pada hujah dalam kurungan. Argumen ini mentakrifkan subset elemen untuk dipilih.

Menggunakan Nilai Kata Kunci untuk Kes Biasa

Pemilih ini boleh menampung dua nilai kata kunci: ganjil dan malah . Mereka amat berguna untuk menggayakan baris bersilih ganti dalam jadual .

Senarai tertib yang ringkas ialah satu lagi contoh yang baik apabila anda mungkin menggunakan nilai kata kunci ini:

 <ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
</ol>

Menggunakan :anak ke-nth(ganjil) pemilih, anda boleh menukar warna setiap item ganti:

---

---

 :nth-child(odd) { 
    color: red; 
}

Item bermula pada indeks 1, jadi item pertama akan kelihatan merah, kemudian yang ketiga, dan seterusnya:

Notasi Fungsian untuk Lebih Fleksibiliti

Anda boleh menggunakan satu integer untuk memilih elemen individu, seperti ini:

---

---

 li:nth-child(4) { 
    color: red; 
}

Dalam kes ini, pemilih hanya sepadan dengan item keempat dalam senarai:

Sintaks ini ialah kes khas sintaks berfungsi yang lebih umum yang memilih item yang sepadan dengan corak tertentu. Sintaks ini ialah:

cara mengaitkan nintendo beralih ke tv

 :nth-child(An+B) { 
    /*...*/ 
}

Dalam notasi ini, A ialah saiz langkah. Ini bermakna bilangan kali pemilih bergerak untuk memilih item seterusnya. Ia membolehkan anda memilih setiap item lain, setiap item ketiga, dsb. B adalah titik permulaan di mana pemilihan bermula.

Sebagai contoh, ambil hujah 3n+1:

 li:nth-child(3n+1) { 
    color: red; 
}

Ini akan memulakan pemilihan pada item pertama dan meneruskan dengan setiap item ketiga selepas itu:

Bandingkan ini dengan ungkapan 3n+2:

 li:nth-child(3n+2) { 
    color:red; 
}

Ini masih memilih setiap item ketiga, tetapi kini ia bermula dari item kedua dalam senarai:

Contoh lain yang menarik ialah :nth-child(n+3):

 li:nth-child(n+3) { 
    color: red; 
}

Yang ini akan memilih setiap item (n), bermula dari yang ketiga (+3). Ia akan kelihatan seperti ini:

Anda juga boleh menggunakan penolakan untuk mencapai hasil tertentu:

telefon android bata tidak akan dihidupkan

 li:nth-child(3n-1) { 
    color: red; 
}

Contoh ini masih memilih setiap item ketiga, tetapi ia bermula dari 'tolak dahulu'. Sebenarnya, ini bermakna ia akan memilih item kedua dalam senarai, kemudian yang kelima, dan seterusnya:

Sintaks

Anda juga boleh menggunakan kata kunci daripada diikuti oleh a pemilih sebagai hujah dalam pemilih :nth-child(). Sintaks ini membolehkan anda mengecilkan item yang mungkin yang dipilih oleh corak biasa.

Sebagai contoh, bayangkan penanda anda lebih rumit daripada yang asal:

 <ol> 
    <li class="old">Item 1</li> 
    <li class="new">Item 2</li> 
    <li class="new">Item 3</li> 
    <li class="old">Item 4</li> 
    <li class="new">Item 5</li> 
    <li class="new">Item 6</li> 
    <li class="new">Item 7</li> 
</ol>

Sekarang, gunakan :nth-child untuk memilih item genap daripada set yang mempunyai kelas tertentu:

 .new { 
    font-weight: bold; 
} 
 
li:nth-child(even of.new) { 
    color: red; 
}

Perhatikan bagaimana hanya item tebal bernombor genap berwarna merah:

Juga pertimbangkan bagaimana ini berbeza daripada li.new:nth-child(even) yang menyasarkan .elemen baharu, tetapi hanya jika ia sekata. Ini akan menjadi item 2 dan 6 dalam contoh di atas.

Bekerja Dengan Pemilih :nth-child().

Anda boleh mencapai reka bentuk unik menggunakan pemilih :nth-child(). Anda boleh membuat tapak web yang berwarna-warni dan menyerlahkan baris dan lajur dalam jadual data. Menggabungkannya dengan pemilih CSS lain akan membantu anda membuat reka letak dan reka bentuk yang kompleks.