Paggamit: nth-of-type (n) Uban sa mga Tables
Aron makahimo ang mga lamesa sa mas sayon nga pagbasa, kini sagad makatabang sa estilo sa mga laray nga adunay alternating mga kolor sa background. Usa sa labing komon nga mga paagi sa estilo sa mga lamesa mao ang pagpahimutang sa kolor sa background sa matag laing laray. Kini sagad nga gitawag nga "zebra stripes."
Mahimo nimong mahimo kini pinaagi sa paghimo sa matag lain nga laray nga adunay usa ka klase sa CSS ug dayon nagpaila sa estilo alang niana nga klase. Kini nagtrabaho apan dili kini ang pinakamaayo o pinakamaayo nga paagi sa paglihok niini.
Sa diha nga gamiton kini nga pamaagi, sa matag higayon nga kinahanglan ka mag-edit sa lamesa nga kinahanglan nimo i-edit ang matag usa ka laray sa lamesa aron masiguro nga ang matag laray nahisubay sa mga pagbag-o. Pananglitan, kon ikaw mosal-ot sa usa ka bag-ong laray sa imong lamesa, ang matag laing laray sa ubos kinahanglan nga ang klase mausab.
Ang CSS naghimo sayon sa pag-istilo sa mga lamesa nga may mga zebra nga mga labod. Dili nimo kinahanglan nga makadugang sa bisan unsang dugang nga hiyas sa HTML o mga klase sa CSS, gamiton lamang nimo ang: nth-of-type (n) CSS selector .
Ang: nth-of-type (n) selector usa ka structural pseudo-klase sa CSS nga nagtugot kanimo sa estilo nga mga elemento base sa ilang mga relasyon sa ginikanan ug mga elemento sa igsuon. Mahimo nimo kini gamiton sa pagpilig usa o labaw pa nga mga elemento pinasukad sa ilang order sa tinubdan. Sa laing pagkasulti, kini mahimong magtugma sa matag elemento nga ang nth anak sa usa ka matang sa ginikanan niini.
Ang letrang n mahimong usa ka keyword (sama sa odd o bisan pa), numero, o usa ka pormula.
Pananglitan, sa pag-estilo sa matag lain nga tag sa paragraph nga may usa ka dalag nga kolor sa background, ang imong CSS nga dokumento maglakip sa:
p: nth-of-type (odd) {
background: yellow;
}
Pagsugod sa Imong Talaan sa HTML
Una, paghimo sa imong lamesa nga kasagaran isulat kini sa HTML. Ayaw pagdugang sa bisan unsang pinasahi nga mga klase sa mga linya o kolum.
Sa imong stylesheet, idugang ang mosunod nga CSS:
tr: nth-of-type (odd) {
background-color: #ccc;
}
Kini mag-istilo sa matag lain nga laray nga adunay kolor nga kolor nga background nga nagsugod sa unang laray.
Pag-ilis sa mga Kolum sa Parehong Paagi
Mahimo nimo ang sama nga matang sa estilo sa mga kolum sa imong mga lamesa. Sa pagbuhat sa ingon, usba ang tr sa imong klase sa CSS ngadto sa td. Pananglitan:
td: nth-of-type (odd) {
background-color: #ccc;
}
Gamit ang Mga pormula sa nth-of-type (n) Selector
Ang syntax alang sa pormula nga gigamit sa selector usa ka + b.
Ang usa ka numero nga nagrepresenta sa gidak-on sa siklo o indeks.
n mao ang tinuod nga letra nga "n" ug nagrepresentar sa usa ka counter, nga mga bitoon sa 0.
+ usa ka operator, nga mahimo usab nga "-"
b usa ka integer ug nagrepresentar sa gibug-aton nga bili-pananglitan, pila ka laray ang kinahanglan nga magsugod ang tigpili sa kolor sa background. Gikinahanglan kini kon ang usa ka operator gilakip sa pormula.
Pananglitan, kon gusto ka nga magtakda og kolor sa background alang sa matag 3rd row, ang imong pormula mahimong 3n + 0. Ang imong CSS mahimong tan-awon sama niini:
tr: nth-of-type (3n + 0) {
background: slategray;
}
Makatabang nga mga himan alang sa Paggamit sa nth-of-type Selector
Kung ang imong gibati nga usa ka gamay nga paglaum sa pormula sa aspeto sa paggamit sa pseudo-class nth-of-type selector, sulayi ang: nth Tester site ingon nga usa ka mapuslanon nga himan nga makatabang kanimo sa paghatag kahulugan sa syntax aron makab-ot ang hitsura nga imong gusto. Gamita ang dropdown menu aron makapili sa nth-of-type (mahimo usab nga mag-eksperimento sa uban pang mga pseudo-klase dinhi, usab, sama sa nth-bata).