galite sugadinti, kad jogos serijos numeris bus trečias (trečiasis jūsų tėvo vaiko elementas ). Norėdami stiliuoti šiuos elementus, turime pasirinkti pseudoklasę :n-tas vaikas.

Eikime, pavyzdžiui:

Pirmoji kūno žymos h2 antraštė

• vienas
• du
• trys

Kita h2 turinio žymos antraštė

:n-tas vaikas suformavome elementus

і

, yakі gali dainuoti vaiko elemento eilės numerį tėvo elementų viduryje.

Mūsų užpakalio rezultatas:

Stilizavimas pagal raktinį žodį

Ką reiškia pseudoklasė :nth-child() gali veikti kaip antrinių elementų eilės skaičius, jei reikia stiliui, ir raktiniai žodžiai, nes jie gali žymėti visą elementų grupę. Kaip raktinį žodį galite laimėti dvi reikšmes:

• net (vaikinų elementai)
• nelyginis (nesuporuoti elementai)

Elementų stilizavimas pagal skirtingus raktinius žodžius gali būti naudojamas plačiau, todėl dokumente galite pasirinkti ir stilizuoti vyriškus arba neporinius antrinius elementus.

Iliustracijos dėlei sukurkime dvi paprastas lenteles su skirtingomis stiliaus klasėmis ir atidžiau pažvelkime į pseudoklasės raktinių žodžių reikšmės skirtumus. :n-tas vaikas HTML elementui , Kuri nurodo lentelių eilutę:

Reikšmė net (berniukai)

1 eilutė	Padėtis	Kіlkіst
2 eilutė
3 eilutė
4 eilutė
5 eilutė

Nelyginė vertė (nesusieta)

1 eilutė	Padėtis	Kіlkіst
2 eilutė
3 eilutė
4 eilutė
5 eilutė

Kieno taikymas pergalių pseudoklasei :nth-child() mes stilizavome berniukai pirmosios lentelės eilutės (elementai ) tai nesuporuotas prie kito stalo.

Stilizacija už paprastos matematinės formulės

pseudoklasė :nth-child() leidžia pasirinkti kaip porą, atjungti, chi antrinius elementus su pirmuoju serijos numeriu ir antruosius elementus, pateiktus elementaria matematine formule. Pažvelkime į kitą parinkiklį ir išsiaiškinkime, ką reiškia šis įrašas:

td:nth-child (4n+2)

) eilutės viduryje, pradedant nuo kitos lentelės viduryje, bus stilius:

• 4n- Ketvirtasis odinis elementas.
• 2

Formulės gali turėti kitokią reikšmę su atpažinimo ženklu, tačiau nėra būtinų dalykų:

td:nth-child(4n-1)(fono spalva: šviesiai mėlyna; / * nustatyti fono spalvą * / )

Šis parinkiklis reiškia, kad lentelės vidurio ketvirčių oda ( ) eilutės viduryje, pradedant nuo trečios lentelės vidurio (dėl objektyvių priežasčių nėra -1 vidurio, tai bus sunaikinta į kairę), bus stilizuotas:

• 4n- Ketvirtasis odinis elementas.
• -1 - Pataisykite kokį nors elementą.

Pažvelkime į Viktorijos pavyzdį:

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

Stalo vidurio ketvirčių odą pasirinkome ir sudėliojome ( ) eilutės viduryje, pradedant nuo kitos lentelės viduryje. Mūsų užpakalio rezultatas:

basicweb.ru

Kaip naudoti n-tąjį antrinį CSS parinkiklį

CSS turi n-tųjų antrinių pavadinimų parinkiklį, tiksliau, pseudo parinkiklį. Jogo Viktorijos užpakalis:

Ul li:nth-child(3n+3) (spalva: #ccc; )

CSS stomp: zastosovuyu stiliai, skirti trečiojo elemento odai netvarkingame sąraše. O 3, 6, 9, 12 yra per plonas. Ale, kaip tai veikia? Ir taip pat, kaip tu gali imti vigoda, vikoristuuchi n-tąjį vaiką?

Pagrindinis pojūtis stipresnis ties smilkinių vingiais. n-asis vaikas priima du raktinius žodžius: net(vaikinas) tai nelyginis(Nesuporuotas). Sensas yra visiškai beprotiškas. Net pasirinkti suporuotus elementus (2, 4, 6), nelyginius - nesuporuotus (1, 3, 5).

Kaip parodyta užpakaliuke, n-asis vaikas gali būti paverstas viraziu. Koks yra paprasčiausias įmanomas virazas? Tik skaičius. Jei skaičių rašysite lankais, bus surinktas vienas elementas. Pavyzdžiui, pasirinkite penktąjį sąrašo elementą:

Ul li:nth-child(5) (spalva: #ccc; )

Pasukkime į savo pirmąjį užpakalį, prie yakum mi vikorista viraz (3n + 3). kaip tu dirbi? Kodėl renkatės trečiojo elemento odą? Visa pakeitimo esmė n. Reikės nulio ar daugiau verčių. Pažvelkime į ataskaitą:

(3 x 0) + 3 = 3 = 3-as elementas (3 x 1) + 3 = 6 = 6-as elementas (3 x 2) + 3 = 9 = 9-as elementas ir pan.

Dabar pabandykime šį virazą: nth-child(2n+1):

(2 x 0) + 1 = 1 = pirmasis elementas (2 x 1) + 1 = 3 = trečias elementas (2 x 2) + 1 = 5 = 5 elementas ir pan.

Rezultatai buvo atimti iš tų pačių dalykų, kurie buvo laimėti koeficientais, todėl jūs negalite dažnai naudoti tokio virazo tokiam rangui. Be to, mūsų pirmąjį užpakaliuką taip pat galima pakeisti ir pakeisti originalia viraze (3n + 3), viraze (3n):

(3 x 0) + 0 = 0 = nėra galiojimo (3 x 1) + 0 = 3 = 3-as elementas (3 x 2) + 0 = 6 = 6-as elementas ir pan.

Jakų bachitas, to paties rezultatas, bet nereikia rašyti „+3“. Taip pat galime rasti neigiamą viraz reikšmę. Pavyzdžiui, 4n-1:

(4 x 0) - 1 = -1 = negalioja (4 x 1) - 1 = 3 = trečias elementas (4 x 2) - 1 = 7 = 7-as elementas ir pan.

Neigiamų koeficiento n verčių skaičius atrodo stebėtinai mažas, nes skirtumas nebus rastas neigiamame rezultate. Turėsite nuolat keisti virusą, kad pridėtumėte teigiamų elementų. Kaip paaiškėjo, šis pidkhidas jau buvo protingas pirmųjų n elementų pasirinkimas. Pažvelkime į užpakalį su „-n + 3“:

0 + 3 = 3 = 3 elementas -1 + 3 = 2 = 2 elementas -2 + 3 = 1 = 1 elementas -3 + 3 = 0 = negalioja

Kryžminė naršyklė

nth-child yra vienas iš svarbiausių atributų, nors ir kelių naršyklių, nepateisinantis absoliutaus nulio IE, kaip ir 8-oji versija. Tai yra, jei kalba eina apie jogo posūkį, tai rezultatas yra grandininis vizualinio efekto pasaulis (pavyzdžiui, rozmalovka eilės kaip lentelės), tada tai yra idealus pidhidas. Ale, gal, nereikia varto vikoristovuvat yogo už ką nors svarbaus, kad gali užstrigti, pavyzdžiui, dėl išdėstymo teisingumo.

Akivaizdu, kad jei naudojate „jQuery“, jums nereikės jaudintis dėl to, kaip „jQuery“ veikia „Internet Explorer“.

Na, namkinets

Galite žaisti su skirtingų tipų selektoriumi, esančiu užpakalio pusėje.

www.css-tricks.ru

Vertė

Vertė	apibūdinimas
Skaičius	Teigiamas skaičius yra 1. Nurodo elemento, kurį norime grąžinti, numerį. Elementų numeracija prasideda nuo pirmojo.
nelyginis	Nesuporuoti elementai.
net	Skaitymo elementai.
Viraz	Galima sudėti specialias eilutes su raide n, kuri reiškia visus sveikuosius skaičiaus vіd nulis (ne kaip vienas!) iki nepateisinamumo. Taigi, 2n reiškia visas skaičių poras (pradedant nuo kitos). Kaip tu gali suprasti? Pakeiskite n iš eilės skaičių, pvz., 0 ir tt: jei n = 0, tai 2n duoda 0, toks elementas negali būti ( elementų numeracija nuo 1!), jei n = 1, tai 2n suteikia 2 kitą elementą, jei n = 2, 2n suteikia 4 - ketvirtą elementą. Kaip parašyti 3n - bus trečias elementas (pradedant nuo trečiojo!) ir pan.

Taikyti

Užpakalis

Šiame užpakaliuke turime ryškiai raudoną spalvą, kuri yra 4-as griebtuvas jo tėtis (4-as viduriniame amžiuje):

Vikonanny kodo rezultatas:

Užpakalis

Ninі chervonimi zrobimo viskas berniukai li:

Vikonanny kodo rezultatas:

Užpakalis

Ninі chervonimi zrobimo viskas nesuporuotas li:

Vikonanny kodo rezultatas:

Užpakalis

Ninі chervonimi zrobimo oda trečia li (pradedant nuo trečio):

Vikonanny kodo rezultatas:

Užpakalis

Pasirinkiklis gali nurodyti elementų diapazoną. Tarkime, kad turite 20 elementų sąrašą ir turite pasirinkti elementus nuo 7 iki 14 imtinai. Galite jį apiplėšti taip:

Vikonanny kodo rezultatas:

code.mu

Sintaksė

n-oji antroji pseudoklasė nurodyta vienu argumentu, kuris parodo atitikimo elementų modelį.

raktinių žodžių reikšmės

nelyginis Nurodo elementus, kurių skaitinė padėtis brolių ir seserų serijoje yra nelyginė: 1, 3, 5 ir tt. net Žymi elementus, kurių skaitinė padėtis serijoje broliai yra lyginė: 2, 4, 6 ir kt.

funkcinis žymėjimas

Nurodo tokius elementus kaip skaitinė padėtis brolių ir seserų serijose, atitinkančiose modelį An+B , kiekvienam teigiamam sveikajam skaičiui arba nulinei n reikšmei. pirmojo elemento indeksas yra 1 . A ir B reikšmės turi būti abi s.

Formali sintaksė

:nth-child( [apie ]?)

kur
= net nelyginis
=

kur
=

kur
=
= ">" " " "~" " "

kur
=

CSS turi n-tųjų antrinių pavadinimų parinkiklį, tiksliau, pseudo parinkiklį. Jogo Viktorijos užpakalis:

Ul li:nth-child(3n+3) (spalva: #ccc; )

CSS stomp: zastosovuyu stiliai, skirti trečiojo elemento odai netvarkingame sąraše. O 3, 6, 9, 12 yra per plonas. Ale, kaip tai veikia? Ir taip pat, kaip tu gali imti vigoda, vikoristuuchi n-tąjį vaiką?

Pagrindinis pojūtis stipresnis ties smilkinių vingiais. n-asis vaikas priima du raktinius žodžius: net(vaikinas) tai nelyginis(Nesuporuotas). Sensas yra visiškai beprotiškas. Net pasirinkti suporuotus elementus (2, 4, 6), nelyginius - nesuporuotus (1, 3, 5).

Kaip parodyta užpakaliuke, n-asis vaikas gali būti paverstas viraziu. Koks yra paprasčiausias įmanomas virazas? Tik skaičius. Jei skaičių rašysite lankais, bus surinktas vienas elementas. Pavyzdžiui, pasirinkite penktąjį sąrašo elementą:

Ul li:nth-child(5) (spalva: #ccc; )

Pasukkime į savo pirmąjį užpakalį, prie yakum mi vikorista viraz (3n + 3). kaip tu dirbi? Kodėl renkatės trečiojo elemento odą? Visa pakeitimo esmė n. Reikės nulio ar daugiau verčių. Pažvelkime į ataskaitą:

(3 x 0) + 3 = 3 = 3-as elementas (3 x 1) + 3 = 6 = 6-as elementas (3 x 2) + 3 = 9 = 9-as elementas ir pan.

Dabar pabandykime šį virazą: nth-child(2n+1):

(2 x 0) + 1 = 1 = pirmasis elementas (2 x 1) + 1 = 3 = trečias elementas (2 x 2) + 1 = 5 = 5 elementas ir pan.

Rezultatai buvo atimti iš tų pačių dalykų, kurie buvo laimėti koeficientais, todėl jūs negalite dažnai naudoti tokio virazo tokiam rangui. Be to, mūsų pirmąjį užpakaliuką taip pat galima pakeisti ir pakeisti originalia viraze (3n + 3), viraze (3n):

(3 x 0) + 0 = 0 = nėra galiojimo (3 x 1) + 0 = 3 = 3-as elementas (3 x 2) + 0 = 6 = 6-as elementas ir pan.

Jakų bachitas, to paties rezultatas, bet nereikia rašyti „+3“. Taip pat galime rasti neigiamą viraz reikšmę. Pavyzdžiui, 4n-1:

(4 x 0) - 1 = -1 = negalioja (4 x 1) - 1 = 3 = trečias elementas (4 x 2) - 1 = 7 = 7-as elementas ir pan.

Neigiamų koeficiento n verčių skaičius atrodo stebėtinai mažas, nes skirtumas nebus rastas neigiamame rezultate. Turėsite nuolat keisti virusą, kad pridėtumėte teigiamų elementų. Kaip paaiškėjo, šis pidkhidas jau buvo protingas pirmųjų n elementų pasirinkimas. Pažvelkime į užpakalį su „-n + 3“:

0 + 3 = 3 = 3 elementas -1 + 3 = 2 = 2 elementas -2 + 3 = 1 = 1 elementas -3 + 3 = 0 = negalioja

Kryžminė naršyklė

nth-child yra vienas iš svarbiausių atributų, nors ir kelių naršyklių, nepateisinantis absoliutaus nulio IE, kaip ir 8-oji versija. Štai kodėl, jei kalba eina apie jogo posūkį, tai rezultatas yra pasaulio vizualinio efekto grandinė (pavyzdžiui, dainavimo stalo eilės tarptinklinis ryšys), tada tai yra idealus pidhidas. Ale, gal, nereikia varto vikoristovuvat yogo už ką nors svarbaus, kad gali užstrigti, pavyzdžiui, dėl išdėstymo teisingumo.

Akivaizdu, kad jei naudojate „jQuery“, jums nereikės jaudintis dėl to, kaip „jQuery“ veikia „Internet Explorer“.

Na, namkinets

Galite žaisti su skirtingais selektorių tipais

apibūdinimas

:nth-child pseudoklasė yra pateisinama stiliaus elementams, pagrįstiems elementų medžio numeracija.

Sintaksė

elementas:nth-child(nelyginis | lyginis |<число> | <выражение>) {...}

Vertė

nelyginis Turi būti nesuporuoti elementų numeriai. net ūsai turi elementų numerius. Vaiko tėvo vaiko elemento eilės numeris. Numeravimas prasideda nuo 1, todėl tai bus pirmasis elementas sąraše. viraz Nustatyti kaip an+b , kur a ir b yra skaičiai, o n yra skaičius, kuris automatiškai nustato reikšmę 0, 1, 2...

Jei a lygus nuliui, jis nerašomas ir įrašas sutrumpinamas iki b. Jei b lygus nuliui, jis taip pat nenurodomas ir rašomas an forma. a ir b gali būti neigiami skaičiai, kartais pliuso ženklas pasikeičia į minusą, pavyzdžiui: 5n-1.

Rahunka vykoristannya neigiamų verčių a ir b deakі rezultatai gali būti neigiami arba lygūs nuliui. Tačiau daugiau teigiamų reikšmių pridedama prie elementų, kurių elementų numeracija prasideda nuo 1.

Prie stalo 1 siūloma, kad būtų galima surūšiuoti pagrindinius žodžius, taip pat nurodyta, kad bus priskirti elementų numeriai.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Pirminis benzinas	16	34	62	74	57
Auksas	4	69	72	56	47
Mediena	7	73	79	34	86
Akmenys	23	34	88	53	103

Tokiu atveju pseudoklasė :n-asis vaikas pakeis pirmosios lentelės eilės stilių ir įkvėps visų suporuotų eilučių spalvų viziją (1 pav.).

Facebook

Twitter

Susisiekus su

Google+

iPad