Indlela yokudala iidrafri ezifakwe kwi-Zebra ngeCSS

Ukusebenzisa: i-nth-of-type (n) neTables

Ukwenza ietafile zilula ukufunda, kudla ngokunceda kwimigca yesitayela kunye nemibala engasemva. Enye yezindlela eziqhelekileyo kwietafile zetekisi ukusetha umbala wesiqalo kuwo wonke umqolo. Oku kudla ngokuba kuthiwa "imivumba yeebhara."

Ungayifeza oku ngokubeka onke amanqaku ngeklasi yeCSS uze uchaze isitala sale klasi. Oku kusebenza kodwa akuyona indlela efanelekileyo okanye eyona ndlela ihamba phambili ngayo.

Xa usebenzisa le ndlela, rhoqo xa ufuna ukuhlela le tafile ungadinga ukuhlela ngamnye umqolo omnye etafileni ukuqinisekisa ukuba umqolo ngamnye uhambelana neenguqulelo. Ngokomzekelo, ukuba ufaka umqolo omtsha kwitafile yakho, yonke enye umgca wezantsi ifuna ukuba iklasi itshintshe.

I-CSS yenza kube lula amatafula ezitayela kunye nemivalo ye-zebra. Akufuneki ukuba ungeze nayiphi na impawu ze- HTML ezingaphezulu okanye iiklasi zeCSS, usebenzise kuphela: i-nth-of-type (n) ikhethi yeCSS .

I-nth-of-type (n) umkhethi isigaba-sakhiwo se-CSS esikuvumela ukuba wenze izakhi zesitayela esekelwe ubudlelwane babo kubazali nabazalwana babo. Ungayisebenzisa ukukhetha enye okanye ngaphezulu kwezinto ezisekelwe kwikhowudi yazo. Ngamanye amagama, inokulingana nayo yonke into ebengumntwana onguhlobo oluthile lomzali wakhe.

Ileta n ingaba ligama elingundoqo (njengelingaqhelekanga okanye le), inombolo, okanye ifomu.

Ngokomzekelo, kwisitayela ngasinye kwisigcawu somhlathi nombala wesiqalo esimnyama, umqulu wakho weCSS uza kubandakanya:

p: nth-of-type (odd) {
imvelaphi: uphuzi;
}

Qala ngeTable HTML yakho

Okokuqala, yakha itafile yakho njengoko uqhele ukuyibhala kwi-HTML. Ungafaki nayiphi na iklasi ekhethekileyo kwimigca okanye kwiikholomu.

Kwifayile yefayile, yongeza le CSS elandelayo:

tr: uhlobo lwe-type (olungqalileyo) {
Umbala wemibala: #ccc;
}

Oku kuya kufaka wonke umqolo ngombala ongasemva kwebala elivela kumqolo wokuqala.

Izitayela eziNye zoMgca ngeNdlela efanayo

Unokwenza uhlobo olufanayo lwesimboli kwiikholomu zakho. Ukuze wenze njalo, tshintsha kuphela kwiklasi yakho yeCSS ukuya ku-td. Umzekelo:

td: nth-of-type (odd) {
Umbala wemibala: #ccc;
}

Ukusebenzisa iifomula kwi-nth-of-type (n) Seletha

I-syntax yefomula esisetyenzisiweyo kwi-selector yi-+ b.

Ngokomzekelo, ukuba ufuna ukusetha umbala wesiqendu kuwo wonke umqolo wesithathu, ifom yakho iya kuba ngu-3n + 0. I-CSS yakho ibonakala ngathi:

tr: uhlobo lohlobo (3n + 0) {
imvelaphi: slategray;
}

Izixhobo ezifanelekileyo zokusebenzisa i-nth-of-type Uhlobo

Ukuba unesiva esincinci ngolu hlobo lwefomula yokusebenzisa i-nth-type-type-selector, khetha i-site yesitethi njengethuluzi eluncedo elinokukunceda uchaze i-syntax ukufezekisa i-look you look. Sebenzisa imenyu ehlayo ukukhetha u-type-of-type (ungaphinda uzame nezinye iiklasi zogqirha apha, nazo, ezifana nomntwana-nth).