Indlela Yokwakha Amathebula Asusiwe Nge-CSS

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

Ukwenza amathebula alula ukufunda, ngokuvamile kuyasiza kumigqa yesitayela nemilayezo engemuva yangasese. Enye yezindlela ezivame kakhulu kumatafula esitayela ukusetha umbala wangemuva wazo zonke ezinye umugqa. Lokhu kuvame ukubizwa ngokuthi "imivimbo ye-zebra."

Ungakwazi ukufeza lokhu ngokubeka yonke imigqa ngekilasi le-CSS bese uchaza isitayela salesi sifundo. Lokhu kusebenza kepha akuyona indlela engcono noma ephumelelayo kakhulu yokuhamba ngayo.

Uma usebenzisa le ndlela, njalo uma udinga ukuhlela lelo tafula ungadingeka uhlele yonke imigqa etafuleni ukuqinisekisa ukuthi umugqa ngamunye uhambisana nezinguquko. Isibonelo, uma ufaka umugqa omusha etafuleni lakho, wonke umugqa ongezansi udinga ukuba isigaba sishintshe.

I-CSS yenza kube lula amatafula wesitayela ngemivimbo ye-zebra. Awudingi ukwengeza noma yiziphi izimfanelo ze- HTML ezengeziwe noma amakilasi we-CSS, usebenzise nje kuphela: i-nth-of-type (n) ikhethi le-CSS .

I: nth-of-type (n) ukhethwa yi-classic pseudo-class in CSS evumela ukuthi wenze izakhi zesitayela ngokusekelwe ebuhlotsheni babo kubakhi bomzali nabafowabo. Ungayisebenzisa ukuze ukhethe okukodwa noma ngaphezulu kwezinto ezisuselwe ku-oda lakho lomthombo. Ngamanye amazwi, angakwazi ukufanisa zonke izinto eziyingane yomntwana othile ohlobo oluthile lomzali walo.

Incwadi n ingaba yigama eliyinhloko (njengokungavamile noma ngisho), inombolo, noma ifomula.

Isibonelo, isitayela ngasinye isigatshana ithegi nombala wesizinda ophuzi, idokhumenti yakho ye-CSS ingafaka:

i-nth-of-type (engavamile) {
umlando: ophuzi;
}}

Qala NgeThebula Lakho le-HTML

Okokuqala, dala itafula lakho njengoba uvame ukulibhala ku-HTML. Ungangeze noma yiziphi amakilasi akhethekile kumigqa noma amakholomu.

Ethempelini yakho yezitayela, engeza i-CSS elandelayo:

I-nth-of-type (engavamile) {
umbala wesizinda: #ccc;
}}

Lokhu kuzothatha isitayela ngasinye emgqeni ngombala ongemuva wegrey kuqala ngomugqa wokuqala.

Izitayela ezihlukile zendatshana ngendlela efanayo

Ungenza uhlobo olufanayo lomdwebo kumakholomu ezibhebheni zakho. Ukwenza kanjalo, vele ushintshe i-class CSS yakho ku-td. Ngokwesibonelo:

td: nth-of-uhlobo (engavamile) {
umbala wesizinda: #ccc;
}}

Ukusebenzisa amafomula ku-nth-of-type (n) Seletha

I-syntax yefomula esetshenziselwa ukhethwa yi-+ b.

Isibonelo, uma ufuna ukusetha umbala wangemuva kuwo wonke umugqa wesithathu, ifomula yakho ingaba ngu-3n + 0. I-CSS yakho ingahle ibonakale kanje:

I-nth-of-type (3n + 0) {
isizinda: slategray;
}}

Amathuluzi awusizo wokusebenzisa i-nth-of-type Selector

Uma unomuzwa omncane kakhulu ngesici sefomula yokusebenzisa isichazamazwi se-class nth-of-type, sebenzisa i-nth isitifiketi sokuhlola njengethuluzi eliwusizo elingakusiza ukuthi uchaze i-syntax ukuze ufinyelele ukubukeka okufunayo. Sebenzisa imenyu yokudonsela phansi ukuze ukhethe u-nth-of-uhlobo (ungahlola futhi namanye amakilasi angamanga, lapha, njenge-nth-child).