Css nambari ya kawaida ya kipengele. Jinsi mtoto wa nth Anafanya kazi - Viwango vya Wavuti

The: nth-child pseudo-class hutumiwa kutengeneza vipengee kulingana na nambari katika mti wa kipengele.

Uteuzi

Maadili

isiyo ya kawaida Yote sio nambari hata vipengele. hata Nambari zote za kipengele.<число>Nambari ya serial kipengele cha mtoto jamaa na mzazi wao. Kuhesabu huanza saa 1, hiki kitakuwa kipengee cha kwanza kwenye orodha.<выражение>Imebainishwa kama ± b, ambapo a na b ni nambari kamili, na n ni kihesabu ambacho huchukua thamani 0, 1, 2 kiotomatiki ...

Ikiwa a ni sawa na sifuri, basi haijaandikwa na rekodi imefupishwa hadi b. Ikiwa b ni sawa na sifuri, basi pia haijabainishwa na usemi umeandikwa katika fomu an. a na b inaweza kuwa nambari hasi, ambapo ishara ya kujumlisha inabadilika kuwa minus, kwa mfano: 5n-1.

Kwa kutumia thamani hasi za a na b, baadhi ya matokeo yanaweza pia kuwa hasi au sufuri. Walakini, vipengee huathiriwa na thamani chanya pekee kutokana na nambari za bidhaa kuanzia 1.

Jedwali Jedwali la 1 linaorodhesha baadhi ya maneno na maneno muhimu yanayowezekana, na linaonyesha ni nambari gani za bidhaa zitatumika.

Inaruhusiwa kuchanganya darasa mbili: nth-child pseudo-class ili kuchagua aina mbalimbali za vipengele. Vipengee vyote 2 hadi 5 vitachaguliwa hapa.

: mtoto wa nth (n + 2): mtoto wa nth (-n + 5) (...)

Mfano

V mfano huu The: nth-child pseudo-class hutumiwa kubadilisha mtindo wa safu mlalo ya kwanza ya jedwali, na pia kupaka rangi safu mlalo zote zenye nambari sawa (Mchoro 1).

Mchele. 1. Kuweka darasa la uwongo: nth-mtoto kwa safu za meza

Vipimo

Kila vipimo hupitia hatua kadhaa za uidhinishaji.

• Pendekezo - Vipimo hivi vimeidhinishwa na W3C na inapendekezwa kama kiwango.
• Pendekezo la Mgombea ( Pendekezo linalowezekana ) - Kikundi kinachohusika na kiwango kimeridhika kuwa kinalingana na malengo yake, lakini usaidizi wa jumuiya ya wasanidi unahitajika kutekeleza kiwango.
• Pendekezo lililopendekezwa ( Pendekezo lililopendekezwa) - Katika hatua hii, hati inawasilishwa kwa Baraza la Ushauri la W3C kwa idhini ya mwisho.
• Rasimu ya Kufanya Kazi - Toleo lililokomaa zaidi la rasimu baada ya majadiliano na marekebisho kwa ajili ya mapitio ya jumuiya.
• rasimu ya mhariri ( Rasimu ya uhariri) - toleo la rasimu ya kiwango baada ya kuhaririwa na wahariri wa mradi.
• Rasimu ( Vipimo vya rasimu) ni rasimu ya kwanza ya kiwango.

Wacha tuseme kuna HTML kama hii:

<p> Kidogo</ p>
<p> Nguruwe</ p>
</ sehemu>

p: mtoto wa nth (2) (rangi: nyekundu;)

p: nth-ya- aina (2) (rangi: nyekundu;)

Ingawa, bila shaka, kuna tofauti katika wateuzi hawa.

Pseudo-darasa : mtoto wa nth, ina maana ya kuchagua kitu, kama:

1. Kipengele hiki ni aya;
2. Hiki ni kipengele cha pili cha mzazi mmoja.

1. Chagua aya ya pili ya mzazi mmoja.

<h1> Maneno</h1>
<p> Kidogo</ p>
<p> Nguruwe</ p>
</ sehemu>

p: nth- mtoto (2) (rangi: nyekundu;) / * Haifanyi kazi * /

p: nth-ya- aina (2) (rangi: nyekundu;) /* Bado inafanya kazi */

Ukiongeza

baada ya

kisha kiteuzi na: nth-child hatachagua chochote kwa sababu aya sio kitu cha pili tena. Kiteuzi kilicho na: nth-of-type kitaendelea kufanya kazi.

Inaonekana kwangu: nth-ya-aina ni chini ya tete na muhimu zaidi kwa ujumla, licha ya hili: nth-mtoto anaendelea kuwa moja kuu katika kazi. Ni mara ngapi unafikiri, "Nataka kuchagua kipengele cha pili katika kizuizi cha mzazi ikiwa ni aya." Labda wakati mwingine, lakini mara nyingi zaidi unafikiri "Chagua aya ya pili" au "chagua kila safu ya tatu ya meza", kwa kazi hizi zinafaa zaidi: nth-ya-aina (tena, kwa maoni yangu).

Hali nyingi ninaposema "Kwa nini kiteuzi changu hakifanyi kazi na: nth-child?" kutokea kutokana na ukweli kwamba mimi kusahau kuhusu uteuzi wa vitambulisho na tag required haina kugeuka kuwa moja ambayo inahitajika. Kwa hivyo, unapotumia: nth-mtoto, ni bora kutaja kutoka kwa mzazi na usitumie nanga kwa lebo.

dl: mtoto wa mtoto (2) () / * Hii ni bora kuliko * /
dd: nth- mtoto (2) () / * hii * /

Lakini, bila shaka, yote inategemea hali maalum.

Usaidizi wa kivinjari: nth-of-aina ni nzuri sana ... Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Ningesema ikiwa unahitaji usaidizi wa kina basi tumia jQuery (tumia kichaguzi na utumie darasa inapohitajika), lakini jQuery imeshuka msaada kwa: nth-of-type. Nilisikia kwamba kwa sababu ya matumizi adimu, lakini inaonekana kuwa ya kushangaza kwangu. Ikiwa unataka kwenda hivi, basi hapa

Kuna kichaguzi kama hicho, haswa darasa la uwongo linaloitwa: nth-child. Hapa kuna mfano wa kuitumia:

UL LI: nth-mtoto (3n + 3) (rangi: #CCC;)

CSS iliyo hapo juu inafanya nini? Inachagua kila kitu cha tatu ndani ya orodha iliyo na vitone: hii ni ya 3, 6, 9, 12, nk. Wacha tuone jinsi usemi huu unavyofanya kazi na ni nini kingine unaweza kufanya na: nth-child.

Yote inategemea kile kilicho kati ya mabano. Kiteuzi cha nth-child kinakubali maneno muhimu mawili, hata na isiyo ya kawaida. Kila kitu ni rahisi hapa: hata huchagua vipengee hata, kama vile 2, 4, 6, n.k., na isiyo ya kawaida huchagua vipengele visivyo vya kawaida, kama vile 1, 3, 5, nk.

Kama unavyoona katika mfano wa kwanza,: nth-child pia anakubali misemo kama parameta. Ikiwa ni pamoja na milinganyo rahisi zaidi, kwa maneno mengine, nambari tu. Ikiwa utaziweka kwenye mabano, kipengee kimoja tu na nambari inayolingana ndicho kitakachochaguliwa. Kwa mfano, hapa kuna jinsi ya kuchagua kipengee cha tano tu:

UL LI: nth-mtoto (5) (rangi: #CCC;)

Walakini, wacha turudi kwa 3n + 3 kutoka kwa mfano wa kwanza. Inafanyaje kazi na kwa nini kila kitu cha tatu kinachaguliwa? Ujanja wote ni katika kuelewa kutofautisha n na equation iliyopunguzwa ya algebra. Fikiria n kama seti ya nambari kamili sifuri. Kisha kamilisha mlinganyo. Kwa hivyo 3n ni 3 × n, na mlingano mzima pamoja ni (3 × n) +3. Sasa, kubadilisha nambari kubwa kuliko au sawa na sifuri badala ya n, tunapata:

• (3 × 0) + 3 = 3 = kipengele cha 3
• (3 × 1) + 3 = 6 = kipengele cha 6
• (3 × 2) + 3 = 9 = kipengele cha 9, nk.

Je kuhusu: nth-mtoto (2n + 1)?

• (2 × 0) + 1 = 1 = kipengele cha 1
• (2 × 1) + 1 = 3 = kipengele cha 3
• (2 × 2) + 1 = 5 = kipengele cha 5, nk.

Kwa hivyo acha! Hii ni sawa na isiyo ya kawaida. Halafu labda hupaswi kutumia usemi huu? Lakini si sisi tunachanganya zaidi mfano wetu wa kwanza katika kesi hii? Je, ikiwa badala ya 3n + 3 tunaandika 3n + 0, au hata 3n rahisi zaidi?

• (3 × 0) = 0 = hakuna kitu
• (3 × 1) = 3 = kipengele cha 3
• (3 × 2) = 6 = kipengele cha 6
• (3 × 3) = 9 = kipengele cha 9, nk.

Kwa hivyo, kama unavyoona, matokeo ni sawa, ambayo inamaanisha hakuna haja ya +3. Tunaweza kutumia maadili hasi n pia, na pia kutoa katika milinganyo. Kwa mfano, 4n-1:

• (4 × 0) - 1 = –1 = hakuna kitu
• (4 × 1) - 1 = 3 = kipengele cha 3
• (4 × 2) - 1 = 7 = kipengele cha 7, nk.

Kutumia -n kunaweza kuonekana kuwa isiyo ya kawaida, kwani ikiwa matokeo ya mwisho ni hasi, basi hakuna vitu vitajumuishwa katika uteuzi. Lakini ikiwa tutaongeza equation na tena kufanya matokeo kuwa chanya, basi sampuli itageuka kuwa ya kupendeza sana: nayo itawezekana kupata vitu vya kwanza vya n, kwa mfano, kama hii: -n + 3:

• -0 + 3 = 3 = kipengele cha 3
• -1 + 3 = 2 = kipengele cha 2
• -2 + 3 = 1 = kipengele cha 1
• -3 + 3 = 0 = hakuna kitu, nk.

SitePoint ina marejeleo mazuri na ishara nzuri ambayo nitachapisha bila aibu hapa:

n	2n + 1	4n + 1	4n + 4	4n	5n-2	-n + 3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Usaidizi wa kivinjari

Kiteuzi: nth-child ni mojawapo ya viteuzi vichache vya CSS ambavyo vinakaribia kutumika kikamilifu vivinjari vya kisasa na haitumiki kabisa katika IE, hata IE8. Kwa hivyo, linapokuja suala la kuitumia, na matokeo ya mwisho hufanywa kulingana na teknolojia ya uboreshaji unaoendelea - unaweza kuitumia kwa usalama kwa vitu vingine vya muundo, kama vile safu za meza za kuchorea. Walakini, haipaswi kuitumia katika hali mbaya zaidi. Kwa mfano, itegemee katika mpangilio wa tovuti yako, au uondoe ukingo wa kulia kutoka kwa kila kizuizi cha tatu kwenye gridi ya tatu-kwa-tatu ili zitoshee kwa safu.

Kuna kiteuzi katika CSS, haswa kiteuzi bandia kinachoitwa nth-child. Mfano wa matumizi yake:

Ul li: nth-mtoto (3n + 3) (rangi: #ccc;)

CSS iliyo hapo juu hufanya yafuatayo: Tumia mitindo kwa kila kipengee cha tatu kwenye orodha ya vitone. Yaani ya 3, 6, 9, 12, nk. Lakini inafanyaje kazi? Na pia unawezaje kufaidika kwa kutumia nth-child?

Jambo kuu ni usemi ulio kwenye mabano. nth-mtoto huchukua mbili maneno muhimu: hata(hata) na isiyo ya kawaida(isiyo ya kawaida). Maana yao ni wazi kabisa. Hata huchagua vipengele hata (2, 4, 6), isiyo ya kawaida huchagua isiyo ya kawaida (1, 3, 5).

Kama inavyoonyeshwa kwenye mfano hapo juu, mtoto wa nth anaweza kushughulikia misemo. Ni usemi gani rahisi zaidi unaowezekana? Nambari tu. Ikiwa utaandika nambari kwenye mabano, basi kipengee kimoja kitachaguliwa. Kwa mfano, wacha tuchague kipengee cha tano kwenye orodha:

Ul li: nth-mtoto (5) (rangi: #ccc;)

Wacha turudi kwenye mfano wetu wa kwanza, ambao tulitumia usemi (3n + 3). Anafanyaje kazi? Kwa nini anachagua kila kipengele cha tatu? Hoja nzima iko kwenye ubadilishaji n. Inakubali nambari kamili kutoka sifuri na zaidi. Hebu tuangalie kwa karibu:

(3 x 0) + 3 = 3 = kipengele cha 3 (3 x 1) + 3 = 6 = kipengele cha 6 (3 x 2) + 3 = 9 = kipengele cha 9, nk.

Sasa hebu tujaribu usemi ufuatao: nth-child (2n + 1):

(2 x 0) + 1 = 1 = kipengele cha 1 (2 x 1) + 1 = 3 = kipengele cha 3 (2 x 2) + 1 = 5 = kipengele cha 5, nk.

Mwishowe, tulipata kitu sawa na katika kesi ya isiyo ya kawaida, kwa hivyo hakuna haja ya kutumia usemi kama huo mara nyingi. Kwa kuongezea, mfano wetu wa kwanza pia unaweza kurahisishwa na kutumiwa badala ya usemi asilia (3n + 3), usemi (3n):

(3 x 0) + 0 = 0 = hakuna mechi (3 x 1) + 0 = 3 = kipengele cha 3 (3 x 2) + 0 = 6 = kipengele cha 6, nk.

Kama unaweza kuona, matokeo ni sawa, lakini huna haja ya kuandika "+3". Tunaweza pia kutumia maadili hasi katika usemi. Kwa mfano, 4n-1:

(4 x 0) - 1 = -1 = hakuna mechi (4 x 1) - 1 = 3 = kipengele cha 3 (4 x 2) - 1 = 7 = kipengele cha 7, nk.

Kutumia maadili hasi kwa mgawo wa n inaonekana kuwa ya kushangaza kidogo, kwa sababu ikiwa matokeo ni hasi, hakuna mechi itapatikana. Utahitaji kubadilisha kila mara usemi ili kuongeza vipengele vyema. Kama ilivyotokea, njia hii ni rahisi sana kwa kuchagua vitu vya kwanza vya n. Wacha tuangalie mfano na "-n + 3":

0 + 3 = 3 = kipengele cha 3 -1 + 3 = 2 = kipengele cha 2 -2 + 3 = 1 = kipengele cha 1 -3 + 3 = 0 = hakuna mechi

Utangamano wa kivinjari

nth-child ni mojawapo ya sifa za bahati mbaya ambazo ni kivinjari-tofauti kabisa, isipokuwa sifuri kabisa katika IE, hata toleo la 8. Kwa hivyo linapokuja suala la kuitumia, basi ikiwa matokeo yanayotarajiwa ni kwa njia fulani athari ya kuona(kwa mfano, kuchorea safu za meza fulani), basi hii ni njia bora. Lakini labda haupaswi kuitumia kwa kitu muhimu zaidi ambacho kinaweza kuathiri, kwa mfano, usahihi wa mpangilio.

Kwa kweli, ikiwa unatumia jQuery basi haifai kuwa na wasiwasi juu ya hili, kwani jQuery inafanya kazi hata kwenye Internet Explorer.

Na hatimaye

Unaweza kucheza karibu na misemo tofauti ya kiteuzi kwa