Gebruik: nde-van-tipe (n) Met tafels
Om tafels makliker te lees, is dit dikwels nuttig om rye te stel met afwisselende agtergrondkleure. Een van die mees algemene maniere om tafels te styl, is om die agtergrondkleur van elke ander ry te stel. Dit word dikwels na verwys as "sebra strepe."
Jy kan dit bereik deur elke ander ry met 'n CSS-klas te stel en dan die styl vir daardie klas te definieer. Dit werk maar is nie die beste of mees doeltreffende manier om daaroor te gaan nie.
Wanneer u hierdie metode gebruik, moet u elke ry in die tabel elke keer wat u nodig het, wysig om te verseker dat elke ry ooreenstem met die veranderinge. Byvoorbeeld, as u 'n nuwe ry in u tabel plaas, moet elke klas onder die klas die klas verander.
CSS maak dit maklik om tafels met sebrastrepe te styl. Jy hoef geen ekstra HTML- eienskappe of CSS-klasse by te voeg nie, jy gebruik net die: nde-van-tipe (n) CSS selector .
Die: nth-of-type (n) selector is 'n strukturele pseudoklas in CSS wat u toelaat om elemente op grond van hul verhoudings aan ouer- en broerselemente te styl. U kan dit gebruik om een of meer elemente op grond van hul bronbestelling te kies. Met ander woorde, dit kan ooreenstem met elke element wat die nde kind van 'n bepaalde soort van sy ouer is.
Die letter n kan 'n navraag wees (soos vreemd of ewe), 'n nommer of 'n formule.
Byvoorbeeld, om elke ander paragraaf-tag met 'n geel agtergrondkleur te styl, sal jou CSS-dokument die volgende insluit:
p: nde-van-tipe (vreemd) {
agtergrond: geel;
}
Begin met jou HTML-tabel
Maak eers jou tabel, soos jy dit normaalweg in HTML sal skryf. Moenie spesiale klasse by die rye of kolomme voeg nie.
Voeg jou volgende CSS by in jou style heet.
tr: nde-van-tipe (vreemd) {
agtergrond-kleur: #ccc;
}
Dit sal elke ander ry styl met 'n grys agtergrondkleur wat begin met die eerste ry.
Styl wisselende kolomme op dieselfde manier
Jy kan dieselfde soort stilering aan kolomme in jou tabelle doen. Om dit te doen, verander net die tr in u CSS klas na td. Byvoorbeeld:
td: nth-of-type (vreemd) {
agtergrond-kleur: #ccc;
}
Formules gebruik in 'n nde-van-tipe (n) selector
Die sintaksis vir 'n formule wat in die selector gebruik word, is 'n + b.
a is 'n getal wat die siklus of indeksgrootte verteenwoordig.
n is eintlik die letter "n" en verteenwoordig 'n toonbank, wat sterre by 0.
+ is 'n operateur, wat ook "-"
b is 'n heelgetal en verteenwoordig die verrekenwaarde - byvoorbeeld, hoeveel rye af moet die selector begin om die agtergrondkleur toe te pas. Dit word vereis as 'n operateur in die formule ingesluit word.
As jy byvoorbeeld 'n agtergrondkleur wil stel vir elke 3de ry, sal jou formule 3n + 0 wees. Jou CSS kan so lyk:
tr: nde-van-tipe (3n + 0) {
agtergrond: slategray;
}
Nuttige hulpmiddels vir die gebruik van nth-of-type selector
As jy 'n bietjie voel oor die formule-aspek van die gebruik van die pseudoklas-nde-van-tipe selector, probeer die: nde Tester-werf as 'n nuttige hulpmiddel wat jou kan help om die sintax te definieer om die voorkoms wat jy wil hê, te bereik. Gebruik die vervolg keuselys om nth-of-type te kies (jy kan ook hier ook eksperimenteer met ander pseudoklasse soos n-kind).