Apakah kegunaan nth-child?

Cara menggunakan nth-child: 1. Untuk memilih nombor genap, anda boleh menggunakan nth-child(genap); Untuk memilih nombor ganjil, anda boleh menggunakan nth-child(ganjil); . Untuk memilih elemen pada kedudukan tertentu, anda boleh Gunakan indeks kedudukan tertentu 4. Untuk memilih julat elemen tertentu, anda boleh menggunakan: nth-child(-n+3) {font-weight: bold;}.

nth-child ialah pemilih kelas pseudo dalam CSS, digunakan untuk memilih elemen anak pada kedudukan tertentu dalam elemen induk. Dalam artikel ini, kami akan memperkenalkan penggunaan nth-child dan beberapa senario aplikasi biasa.

1. Sintaks asas

Sintaks anak ke-1 adalah seperti berikut:

父元素:nth-child(n)

Antaranya, elemen induk mewakili elemen induk yang akan dipilih, dan n mewakili kedudukan elemen anak yang akan dipilih.

Nota: Jawatan dikira bermula dari 1.

2. Contoh penggunaan

Di bawah ini kami akan memperkenalkan penggunaan nth-child melalui beberapa contoh khusus.

1. Pilih nombor genap

Jika anda ingin memilih semua elemen anak bernombor genap di bawah elemen induk, anda boleh menggunakan nth-child(even).

Sebagai contoh, untuk memilih semua baris bernombor genap dalam senarai, anda boleh menggunakan kod berikut:

li:nth-child(even) {
background-color: #ccc;
}

2 Pilih elemen bernombor ganjil

Jika anda ingin memilih semua elemen anak bernombor ganjil di bawah elemen induk. , anda boleh menggunakan nth-child( ganjil).

Sebagai contoh, untuk memilih semua baris bernombor ganjil dalam jadual, anda boleh menggunakan kod berikut:

tr:nth-child(odd) {
background-color: #ccc;
}

3 Pilih elemen pada kedudukan tertentu

Jika anda hanya mahu memilih elemen anak pada kedudukan tertentu di bawah induk. elemen, anda boleh menggunakan indeks kedudukan tertentu.

Contohnya:

Untuk memilih elemen pertama dalam senarai, anda boleh menggunakan:

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

Untuk memilih elemen terakhir dalam senarai, anda boleh menggunakan:

li:nth-child(n):last-child {
color: blue;
}

4 Pilih julat elemen tertentu

-anak juga Anda boleh menggunakan formula untuk memilih julat elemen.

Contohnya:

Untuk memilih tiga elemen anak pertama di bawah elemen induk, anda boleh menggunakan:

nth-child(-n+3) {
font-weight: bold;
}

Untuk memilih lima elemen anak terakhir di bawah elemen induk, anda boleh menggunakan:

nth-child(n+6):nth-child(-n+10) {
font-style: italic;
}

3. Nota

Terdapat beberapa perkara yang perlu diambil perhatian apabila menggunakan nth-child:

1. nth-child hanya boleh memilih elemen anak daripada jenis yang sama. Sebagai contoh, div pertama dan rentang pertama di bawah elemen induk tidak boleh dipilih.

2. Susunan pemilih kelas pseudo adalah penting. Jika pemilih anak ke-n digunakan beberapa kali dalam helaian gaya yang sama, peraturan berikutnya akan menimpa peraturan sebelumnya.

3. Anak ke-1 mula mengira dari 1, bukan dari 0. Ini berbeza daripada cara pengiraan dilakukan dalam beberapa bahasa pengaturcaraan, sila ambil perhatian perbezaannya.

4. Ringkasan

anak-anak adalah pemilih CSS yang berkuasa Dengan menggunakan parameter kedudukan yang berbeza, anda boleh memilih elemen anak pada kedudukan tertentu dalam elemen induk. Sama ada ia memilih elemen pada kedudukan tertentu atau memilih elemen dalam julat tertentu, anak ke-n boleh membantu kami mencapainya dengan cepat.

Namun, anda perlu ingat bahawa penggunaan nth-child mesti mematuhi peraturan tertentu, terutamanya elemen induk mestilah elemen yang sama jenis. Saya harap artikel ini akan membantu anda memahami dan menggunakan nth-child dengan betul. .

Atas ialah kandungan terperinci Apakah kegunaan nth-child?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!