Paggamit ng: nth-of-type (n) Gamit ang Mga Table
Upang gawing mas madali ang pagbabasa ng mga talahanayan, kadalasan ay kapaki-pakinabang ang mga hanay ng estilo na may mga alternating background na kulay. Ang isa sa mga pinaka-karaniwang paraan sa mga talahanayan ng estilo ay upang itakda ang kulay ng background ng bawat iba pang mga hilera. Ito ay madalas na tinutukoy bilang "zebra guhitan."
Maaari mong maisagawa ito sa pamamagitan ng pagtatakda ng bawat iba pang hilera gamit ang isang klase ng CSS at pagkatapos ay tinutukoy ang estilo para sa klase na iyon. Ito ay gumagana ngunit hindi ang pinakamahusay o pinaka mahusay na paraan upang gawin ang tungkol dito.
Kapag ginagamit ang pamamaraang ito, sa bawat oras na kailangan mong i-edit ang talahanayan na maaaring kailangan mong i-edit ang bawat solong hilera sa talahanayan upang matiyak na ang bawat hilera ay pare-pareho sa mga pagbabago. Halimbawa, kung nagpasok ka ng isang bagong hanay sa iyong talahanayan, ang bawat iba pang hanay sa ibaba ay kailangang baguhin ang klase.
Pinapadali ng CSS ang estilo ng mga talahanayan na may mga zebra guhit. Hindi mo kailangang magdagdag ng anumang dagdag na mga katangian ng HTML o mga klase ng CSS, gagamitin mo lang ang: nth-of-type (n) CSS selector .
Ang: nth-of-type (n) selector ay isang istruktura na pseudo-klase sa CSS na nagbibigay-daan sa iyo sa mga elemento ng estilo batay sa kanilang mga relasyon sa mga magulang at kapatid na elemento. Maaari mo itong gamitin upang pumili ng isa o higit pang mga elemento batay sa kanilang pinagmulan ng order. Sa ibang salita, maaari itong tumugma sa bawat elemento na ang nth anak ng isang partikular na uri ng magulang nito.
Ang titik n ay maaaring isang keyword (tulad ng kakaiba o kahit na), isang numero, o isang formula.
Halimbawa, sa estilo ng bawat iba pang tag ng talata na may kulay ng dilaw na background, ang iyong CSS na dokumento ay kinabibilangan ng:
p: nth-of-type (odd) {
background: dilaw;
}
Magsimula Sa Iyong Talaan ng HTML
Una, lumikha ng iyong talahanayan gaya ng karaniwang isulat mo ito sa HTML. Huwag magdagdag ng anumang mga espesyal na klase sa mga hilera o haligi.
Sa iyong stylesheet, idagdag ang sumusunod na CSS:
tr: nth-of-type (odd) {
background-color: #ccc;
}
Ito ay mag-estilo sa bawat iba pang mga hilera na may kulay abong kulay na nagsisimula sa unang hilera.
Style Alternating Columns sa Parehong Paraan
Maaari mong gawin ang parehong uri ng estilo sa mga haligi sa iyong mga talahanayan. Upang gawin ito, baguhin lamang ang tr sa iyong CSS class sa td. Halimbawa:
td: nth-of-type (odd) {
background-color: #ccc;
}
Paggamit ng Mga Formula sa isang nth-of-type (n) Selector
Ang syntax para sa isang formula na ginamit sa tagapili ay isang + b.
a ay isang bilang na kumakatawan sa cycle o laki ng index.
Ang n ay talagang ang titik na "n" at kumakatawan sa isang counter, kung aling mga bituin sa 0.
+ ay isang operator, na maaaring maging "-"
b ay isang integer at kumakatawan sa offset na halaga-halimbawa, kung gaano karaming mga hilera ang dapat magsimula ang tagapili ng paglalapat ng kulay ng background. Ito ay kinakailangan kung ang isang operator ay kasama sa formula.
Halimbawa, kung nais mong magtakda ng kulay ng background para sa bawat 3rd row, ang iyong formula ay 3n + 0. Maaaring ganito ang iyong CSS:
tr: nth-of-type (3n + 0) {
background: slategray;
}
Nakatutulong na Mga Tool para sa Paggamit ng nth-of-type Selector
Kung ang pakiramdam mo ay medyo nangungutya sa aspetong pormula ng paggamit ng pseudo-class nth-of-type na selector, subukan ang: nth Tester site bilang isang kapaki-pakinabang na kasangkapan na maaaring makatulong sa iyo na tukuyin ang syntax upang makamit ang hitsura na gusto mo. Gamitin ang dropdown menu upang piliin ang nth-of-type (maaari mo ring mag-eksperimento sa iba pang mga palsipikadong klase dito, masyadong, tulad ng nth-anak).