Kugwiritsira ntchito: nth-of-mtundu (n) Ndi Mapepala
Kuti apange matebulo mosavuta kuwerenga, nthawi zambiri zimathandiza kuti mizere yowonjezera ikhale ndi mitundu yosiyana siyana. Imodzi mwa njira zofala kwambiri pa matebulo a kalembedwe ndiyo kukhazikitsa mtundu wachibadwidwe wa mzere uliwonse. Izi nthawi zambiri zimatchedwa "zojambula za zebra."
Mungathe kukwaniritsa izi ndikuyika mzere wina uliwonse ndi gulu la CSS ndikufotokozera kalembedwe kalasiyo. Izi zimagwira ntchito koma si njira yabwino kwambiri komanso yothandiza kwambiri.
Mukamagwiritsa ntchito njirayi, nthawi iliyonse muyenera kusintha tebuloyi muyenera kusintha mzere uliwonse pa tebulo kuti muonetsetse kuti mzera uliwonse ukugwirizana ndi kusintha. Mwachitsanzo, ngati muyika mzere watsopano ku tebulo lanu, mzere uliwonse pansipa uyenera kuti kalasiyo isinthe.
CSS imapangitsa kuti zikhale zosavuta kuzilemba matebulo ndi mikwingwirima ya zebra. Simusowa kuwonjezera zotsatira zina za HTML kapena makalasi a CSS, mumagwiritsa ntchito: nth-of-type (n) CSS wosankha .
The: nth-of-mtundu (n) wosankha ndi gulu lachinyengo mu CSS limene limakulolani kuti musinthe zinthu zochokera pa ubale wawo ndi makolo ndi abale awo. Mukhoza kugwiritsa ntchito kusankha imodzi kapena zina zomwe zimachokera pazokhazikitsidwa. Mwa kuyankhula kwina, zikhoza kufanana ndi chilichonse chomwe chiri mwana wa nthiti ya mtundu wake.
Kalata n ingakhale mawu ofunika (monga osamvetseka kapena ngakhale), chiwerengero, kapena fomu.
Mwachitsanzo, polemba ndime iliyonse ndi mtundu wachikasu, zolemba zanu CSS zingaphatikizepo:
p: nth-of-mtundu (osamvetseka) {
kumbuyo: chikasu;
}}
Yambani Ndi Ndandanda Yanu ya HTML
Choyamba, pangani tebulo lanu momwe mungayambe kulemba mu HTML. Musati muwonjezere makalasi apadera ku mizere kapena zigawo.
M'masewera anu, onjezerani CSS yotsatira:
tr: nth-of-mtundu (osamvetseka) {
zojambulajambula: #ccc;
}}
Izi zidzatanthauzira mzere wina uliwonse ndi mtundu wakuda wakuda kuyambira mzere woyamba.
Zojambula Zophatikizapo Zina mwa Njira Yomweyo
Mukhoza kuchita zofanana ndi zojambulajambula pazomwe zikupezeka pa matebulo anu. Kuti muchite zimenezi, sungani kusintha mu CSS yanu mpaka td. Mwachitsanzo:
td: nth-of-mtundu (osamvetseka) {
zojambulajambula: #ccc;
}}
Kugwiritsa Ntchito Maonekedwe mu nth-of-mtundu (n) Wosankha
Mawu omasuliridwa a chigamulo chogwiritsidwa ntchito mu osankha ndi a b.
a ndi nambala yomwe imayimira kuzungulira kapena kukula kwa ndondomeko.
n kwenikweni ndilo "n" ndipo imayimira counter, ndi nyenyezi ziti pa 0.
+ ndi woyendetsa, amene angakhale "-"
b ndi chiwerengero chachikulu ndipo amaimira mtengo wochepa-mwachitsanzo, ndimi zingati m'munsi pamene wozisankhayo ayamba kugwiritsa ntchito mtundu wachikulire. Izi zimafunikanso ngati wogwira ntchitoyo akuphatikizidwa muyambidwe.
Mwachitsanzo, ngati mukufuna kukhazikitsa mtundu wachikulire pa mzere uliwonse wa 3, mawonekedwe anu adzakhala 3n + 0. CSS yanu ingawonekere ngati iyi:
tr: nth-of-mtundu (3n + 0) {
kumbuyo: slategray;
}}
Zida Zothandizira Zogwiritsa ntchito Wosankha wa nth-of-type
Ngati mukudandaula kwambiri ndi njira yogwiritsira ntchito osankhidwa a mtundu wa nth-of-type, yesani: nth Webusaitiyi monga chida chothandiza chomwe chingakuthandizeni kufotokozera syntax kuti mukwaniritse mawonekedwe anu. Gwiritsani ntchito menyu kuti muzisankha mtundu wa nth-of-type (mungayesenso kuyesa magulu ena osalankhula apa, komanso nth-child).