Mar a chruthaicheas tu Tapa Strìopach Zebra le CSS

A 'cleachdadh: nth-of-type (n) Le Clàran

Gus clàran nas fhasa a leughadh, tha e gu tric cuideachail stoidhlichean a dhèanamh le dàta eadar-dhealaichte. Is e aon de na dòighean as cumanta air clàran stoidhle dath cùl-raoin gach sreath eile a shuidheachadh. Thathas gu tric air ainmeachadh mar "zebra stripes."

Is urrainn dhut a choileanadh le bhith a 'suidheachadh gach sreath eile le clas CSS agus an uairsin a' mìneachadh an stoidhle airson a 'chlas sin. Tha seo ag obair ach chan e an dòigh as fheàrr no as èifeachdaiche a th 'ann.

Nuair a bhios tu a 'cleachdadh an dòigh seo, a h-uile turas a dh' fheumas tu airson an clàr sin a dheasachadh, is dòcha gum feum thu gach sreath anns a 'chlàr a dheasachadh gus dèanamh cinnteach gu bheil gach sreath co-chòrdail ris na h-atharrachaidhean. Mar eisimpleir, ma chuireas tu sreath ùr ris a 'bhòrd agad, feumaidh gach sreath eile gu h-ìosal an clas atharrachadh.

Tha CSS ga dhèanamh furasta do bhùird a stoidhle le stràcan zebra. Chan fheum thu feartan HTML no clasaichean CSS a bharrachd a chur ris, ach cleachd thu an: nth-of-type (n) roghnaiche CSS .

Tha an: nth-of-type (n) selector na class pseudo structarach ann an CSS a leigeas leat rudan a stoidhle stèidhichte air an dàimhean ri eileamaidean pàrant is sibling. Faodaidh tu a chleachdadh gus aon eileamaid no barrachd a thaghadh stèidhichte air an òrdugh tùs aca. Ann am faclan eile, faodaidh e a bhith a 'maidseadh a h-uile eileamaid a tha an leanabh aig ìre sònraichte a phàrant.

Faodaidh an litir n a bhith na phrìomh-fhacal (mar eisimpleir corr no eadhon), àireamh no foirmle.

Mar eisimpleir, airson stoidhle gach tag paragraf eile le dathan buidhe, bhiodh an sgrìobhainn CSS agad a 'gabhail a-steach:

p: nth-of-type (corr) {
cùl-raon: buidhe;
}

Tòisich le do chlàr HTML

An toiseach, cruthaich do bhòrd mar a bhiodh tu mar as trice air a sgrìobhadh ann an HTML. Na cuir clasaichean sònraichte sam bith ris na sreathan no na colbhan.

Anns an stoidhle agad, cuir ris na CSS a leanas:

tr: nth-of-type (corr) {
cùl-dath: #ccc;
}

Bidh seo a 'stoidhle gach sreath eile le dath cùil ghlas a' tòiseachadh leis a 'chiad sreath.

Colbhan Eileach Stoidhle anns an Same Way

Faodaidh tu an aon seòrsa stoidhle a dhèanamh do cholbhan anns na clàran agad. Gus seo a dhèanamh, dìreach atharraich an tr sa chlas CSS agad gu td. Mar eisimpleir:

td: nth-of-type (corr) {
cùl-dath: #ccc;
}

A 'cleachdadh Foirmlean ann an nth-of-type (n) Selector

Is e an + b a tha an co-chòrdadh airson foirmle a tha air a chleachdadh anns an taghadh.

Mar eisimpleir, ma tha thu airson dath cùl-taic a shuidheachadh airson gach 3mh sreath, bhiodh an fhoirmle agad 3n + 0. Dh'fhaoidte gum biodh do CSS mar seo:

tr: nth-of-type (3n + 0) {
cùl-raon: sglèat;
}

Innealan feumail airson a bhith a 'cleachdadh roghnaichear nth-of-type

Ma tha thu a 'faireachdainn beagan mì-thoilichte le bhith a' cleachdadh an fhoirmle de bhith a 'cleachdadh roghnaichear nth-of-type class, feuch an làrach-lìn: nth Tester mar inneal feumail a chuidicheas tu gus an co-chòrdadh a mhìneachadh gus an sealladh a tha thu ag iarraidh a choileanadh. Cleachd an clàr-taice a tha a 'dol a-nuas gus nth-of-type a thaghadh (faodaidh tu cuideachd triail a dhèanamh le clasaichean pseudo eile an seo cuideachd, leithid nth-child).