Kushandisa: nth-of-type (n) NeTables
Kuita kuti matafura ave nyore kuverenga, inowanzobatsira kumigwagwa yekutarisa nekunatsvaga mavara mavara. Imwe yenzira dzakajairika dzekutarisa tafura ndiyo yekuisa ruvara rwemukati wemamwe mutsara. Izvi zvinowanzozonzi "mutsara wezbra."
Iwe unogona kuita izvi izvi nekuisa mimwe mimwe mutsara neCSS kirasi uye nekutsanangura chimiro chekirasi iyoyo. Izvi zvinoshanda asi haisi iyo nzira yakanakisisa kana inobudirira yekuita nayo.
Paunenge uchishandisa nzira iyi, nguva dzose iwe uchida kugadzirisa tafura iyo iwe unogona kuchinja mutsara mumwe chete uri patafura kuti uone kuti musero mumwe nomumwe unofanana nekuchinja. Semuenzaniso, kana iwe ukaisa mutsara mutsva patafura yako, imwe mutsara uri pasi apa unoda kuti kirasi ichinje.
CSS inoita kuti zvive nyore kutarisa matafura nemitsetse yejibra. Iwe haufaniri kuwedzera chero humwe humwe huri huno HTML hunhu kana makirasi eCSS, unongoshandisa: nth-of-type (n) CSS sarudzai .
The: nth-of-type (n) sarudzo isarudzo yezvidzidzo muCSS inokubvumira kuti utaure zvinhu zvakabva paukama hwavo kumubereki nehanzvadzi. Iwe unogona kuishandisa kuti usarudze imwe kana zvimwe zvinyorwa zvichibva pane zvavanotanga. Mune mamwe mazwi, inogona kuenzanisa zvinhu zvose zvinonzi mwana wechirudzi rwemhando yakasiyana yemubereki wake.
Tsamba n inogona kuva chinhu chikuru (zvakadai sechisinganzwisisiki kana kunyange), nhamba, kana chirevo.
Semuenzaniso, kutarisa imwe neimwe ndima yemavara nemucheka weruvara, chikwangwani chako cheCSS chinogona kusanganisira:
p: nth-of-type (odd) {
background: yellow;
}
Tanga neIndaneti yako HTML
Chokutanga, tenga tafura yako sezvaunogona kuinyora pasi paHTML. Usati uwedzere mapoka akakwirira kumitsara kana ma column.
Mumiririro yako, wedzera CSS inotevera:
r: nth-of-type (odd) {
mutsara-ruvara: #ccc;
}
Izvi zvinotarisa mamwe mutsara nemuvara wemuchena wekutanga kubva pamutsara wokutanga.
Chimiro Chimwe Chinyorwa Mutsamba muNzira Iyoyo
Iwe unogona kuita mhando imwechete yekunyora kumakamuri mumatafura ako. Kuti uite kudaro, ingoshandura tr yako muCSS yako class kusvika td. Semuyenzaniso:
nkm nth-of-type (odd) {
mutsara-ruvara: #ccc;
}
Kushandisa Mafomu mu nth-of-type (n) Sarudzo
Izwi rechirevo chekushandisa rinoshandiswa mumusarudzo i + b.
A isiri nhamba inomiririra kutenderera kana kuenzanisa ukuru.
n ndiyo chaizvo iyo tsamba "n" uye inomiririra kero, iyo nyeredzi pa 0.
+ ndiye anoshanda, izvo zvingavewo "-"
b iyo inotara uye inomiririra kukosha kwekunaka-semuenzaniso, ingani mitsetse pasi apo muchengeti anotanga kushandisa ruvara rwemukati. Izvi zvinotarisirwa kana mufambisi akabatanidzwa mubumbiro.
Somuenzaniso, kana iwe uchida kuisa ruvara rwemutsara wemutsetse wega wega wechitatu, fomu yako yaizova 3n + 0. CSS yako inogona kutarisa seyiyi:
tr: nth-of-type (3n + 0) {
mamiriro acho ezvinhu: slategray;
}
Zvishandiso Zvinobatsira Pakushandisa nth-of-type-Selector
Kana iwe uchingonzwa uchinetseka nechidimbu chekushandisa shanduro-nth-of-type sarudzo, edzai: nth Tester site sechishandiso chinobatsira chinogona kukubatsira kutsanangura chirevo chekuita kuti uwane maonero aunoda. Shandisa menyu ekudonhedzera kuti usarudze nth-of-type (iwe unogonawo kuedza nedzimwe dzidziro-makirasi pano, zvakare, sa nth-child).