CSS-i :nth-child() valija mõistmine

Nagu kõik CSS-i valijad, saate kasutada :nth-child() veebilehe elementide tuvastamiseks ja neile stiilide rakendamiseks. Kuid see valija võimaldab teil õdede-vendade komplekti nende suhtelise positsiooni alusel kitsendada.

Valija toetab tavaliste juhtumite puhul mõningaid põhimärksõnu, kuid pakub ka võimsat mustrite sobitamise süntaksit. Seda kasutades saate valida elemente tavapäraste korduvate mustrite või keerukamate definitsioonide põhjal, lähtudes oma vajadustest.

Valija :nth-child() süntaks

Nagu CSS-i pseudoklassi valija, erineb :nth-child() süntaks teistest valijatest. See võtab õdede-vendade komplekti elementide sobitamise mustrina argumendi:

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

Põhirõhk on sulgudes olevatel argumentidel. Need argumendid määravad valitavate elementide alamhulga.

Märksõna väärtuste kasutamine tavalistel juhtudel

See valija mahutab kahte märksõna väärtust: kummaline ja isegi. Need on eriti kasulikud tabeli alternatiivsete ridade kujundamine.

Lihtne järjestatud loend on veel üks hea näide nende märksõnaväärtuste kasutamisest:

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

Kasutades :nth-laps (paaritu) valijaga, saate muuta iga alternatiivse üksuse värvi:

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

Üksused algavad indeksiga 1, nii et esimene üksus on punane, seejärel kolmas ja nii edasi:

Funktsionaalne tähistus suurema paindlikkuse tagamiseks

Üksiku elemendi valimiseks saate kasutada ühte täisarvu, näiteks järgmiselt:

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

Sel juhul vastab valija ainult loendi neljandale üksusele:

See süntaks on üldisema funktsionaalse süntaksi erijuhtum, mis valib antud mustrile vastavad üksused. See süntaks on:

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

Selles märgistuses A on sammu suurus. See tähendab, mitu korda valija liigub järgmise üksuse valimiseks. See võimaldab teil valida iga teise üksuse, iga kolmanda üksuse jne. B on lähtepunkt, kust valik algab.

Võtke näiteks argument 3n+1:

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

See alustab valikut esimesest üksusest ja jätkab pärast seda iga kolmanda üksusega:

Võrrelge seda avaldisega 3n+2:

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

See valib endiselt iga kolmanda üksuse, kuid nüüd algab loendi teisest üksusest:

Veel üks huvitav näide on :nth-child (n+3):

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

See valib iga üksuse (n), alates kolmandast (+3). See näeb välja selline:

Teatud tulemuste saavutamiseks võite kasutada ka lahutamist:

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

See näide valib endiselt iga kolmanda üksuse, kuid see algab miinuspunktist. Tegelikult tähendab see, et see valib loendist teise üksuse, seejärel viienda ja nii edasi:

aasta Süntaks

Võite kasutada ka märksõna kohta järgneb a valija argumendina valijas :nth-child(). See süntaks võimaldab teil kitsendada võimalikke üksusi, mille hulgast tavaline muster valib.

Näiteks kujutage ette, et teie märgistus on keerulisem kui originaal:

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

Nüüd kasutage klahvi :nth-child, et valida kindla klassiga üksuste hulgast paariselemendid:

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

Pange tähele, et punased on ainult paarisnumbritega paksud üksused:

Samuti kaaluge, kuidas see erineb li.uus: n-laps (paaris) mis sihib .uusi elemente, kuid ainult siis, kui need on paaris. Need oleksid ülaltoodud näite elemendid 2 ja 6.

:nth-child() valijaga töötamine

Unikaalseid kujundusi saate saavutada valija :nth-child() abil. Saate luua värvikaid veebisaite ning esile tõsta andmetabelites ridu ja veerge. Selle kombineerimine teiste CSS-i valijatega aitab teil luua keerukaid paigutusi ja kujundusi.