: pemilih ke-1

Pemilih ini boleh memadankan elemen dengan tepat, terutamanya termasuk:

:fist-child
:last-child
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty

:first-child memilih elemen anak pertama bagi sesuatu elemen; -child() memilih satu atau lebih elemen anak tertentu bagi suatu elemen; () memilih elemen yang ditentukan; :nth-last-of-type() memilih elemen yang ditentukan dan mula mengira dari elemen terakhir :first-of-type memilih Elemen anak pertama daripada jenis yang sama di bawah elemen induk; last-of-type memilih elemen anak terakhir dari jenis yang sama di bawah elemen induk :only-child memilih elemen yang merupakan satu-satunya elemen elemen induknya memilih elemen yang merupakan satu-satunya anak; elemen jenis yang sama dengan elemen induknya :empty memilih elemen tanpa kandungan di dalamnya.

1. :anak pertama

.demo li:first-child {background: green; border: 1px dotted blue;}.demo li.first {background: green; border: 1px dotted blue;}

2 :anak terakhir

.demo li:last-child {background: green; border: 2px dotted blue;}
.demo li.last {background: green; border: 2px dotted blue;}

3. :nth-child()

:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数
.demo li:nth-child(3) {background: lime;}

Ungkapan jenis ini tidak boleh merujuk kepada nilai negatif, yang bermaksud bahawa li:nth-child(-3) ialah bukan penggunaan yang betul.

:nth-child(2n), kaedah ini adalah variasi dari yang sebelumnya, kita boleh memilih 2 gandaan n, sudah tentu "2" boleh diganti dengan nombor yang anda perlukan li:nth-child(2n) {latar belakang: kapur;} Ia bersamaan dengan .demo

li:nth-child(even) {background: lime;}

:nth-child(-n+5) Pemilih ini memilih yang ke-5 sebelum ini
n=0 --》 -n+5=5 --》 Yang ke-5). li
n=1 telah dipilih --》 -n+5=4 --》 Li ke-4
n=2 telah dipilih --》 -n+5=3 --》 Dipilih Li ketiga
n=3 ---》 -n+5=2 ---》 Li kedua
n=4 telah dipilih ---》 -n+5=1 ---》 Yang pertama telah dipilih li
n=5 --》 -n+5=0 --》 Tiada elemen dipilih

4, :nth-last-child()

.demo li:nth-last-child(4) {background: lime;}

5. :nth-of-type

:nth-of-type adalah serupa dengan :nth-child, kecuali ia hanya mengira elemen yang dinyatakan dalam pemilih

6. :nth-last-of-type

Tidak perlu dikatakan, semua orang boleh membayangkan pemilih ini digunakan sama seperti yang sebelumnya:nth-last-child, tetapi ia ditunjuk jenis unsur.

7 :first-of-type dan :last-of-type

:first-of-type and :last-of-type adalah serupa dengan :first Perbezaan antara -child dan :last-child; ialah jenis elemen ditentukan.

8. :anak-sahaja dan :jenis-sahaja

":anak-sahaja" bermaksud unsur ialah satu-satunya unsur unsur induknya.

9 :kosong

:kosong digunakan untuk memilih elemen tanpa sebarang kandungan di sini bermakna tiada kandungan sama sekali, walaupun ruang Sebagai contoh, anda mempunyai tiga perenggan, satu daripadanya tiada apa-apa dan kosong sepenuhnya tidak untuk dipaparkan