Gebrûk fan: nth-of-type (n) With Tables
Om tabellen maklik te lêzen te meitsjen, is it faak nuttich om rigen te meitsjen mei ôfwikende efterkleuren. Ien fan 'e meast foarkommende manieren om tabellen te styl te meitsjen is de eftergrûnkleur fan elke oare rige te setten. Dit wurdt faak as "zebra stripes" neamd.
Jo kinne dit útfiere troch elke oare rige mei in CSS klasse te setten en de styl foar dizze klasse te definiearjen. Dit wurket mar is net de bêste of meast effisjinte manier om dêr oer te gean.
By it brûken fan dizze metoade, elke kear as jo de tabel oanmeitsje moatte jo alle eleminten yn 't tabel hawwe om elke rige te garandearjen moatte oerienkomt mei de wizigingen. As jo bygelyks in nije rige ynfoegje oan jo tabel, elke oare rige moat it de klasse feroare hawwe.
CSS makket it maklik te meitsjen fan tabellen mei zebra stripes. Jo moatte gjin ekstra HTML- attributen of CSS-lessen taheakje, jo brûke allinich de: nth-of-type (n) CSS selector .
De: nth-of-type (n) selector is in strukturele pseudo-klasse yn CSS, dy't jo eleminten op basearje kinne op basis fan harren relaasjes mei âlders en sibling-eleminten. Jo kinne dit brûke om ien of mear eleminten te selektearjen op grûn fan har boarnearrange. Mei oare wurden kin it elk elemint lykwols it elemint fan in bepaald type fan har âlder wêze.
De letter n kin in kaaiwurd wurde (lykas ûngelyk of sels), in getal, of in formule.
Bygelyks om elke oare tag-tag te wizen mei in giele efterkleur, jo CSS-dokumint soe wêze:
p: nth-of-type (odd) {
eftergrûn: giel;
}
Start mei jo HTML-tafel
Tink derom om jo tabel oan te meitsjen lykas jo normaal yn HTML skriuwe. Skaak gjin spesjale klassen oan 'e rigen of kolommen.
Yn jo stylblêd, add the following CSS:
tr: nth-of-type (odd) {
background-color: #ccc;
}
Dit sil elke oare rige styl mei in grauwe eftergrûnstyl begjinne mei de earste rige.
Styl oplinkende kolommen yn deselde wei
Jo kinne deselde soarte styl meitsje nei kolommen yn jo tabellen. Om dat te dwaan, feroarje jo de tr yn jo CSS-klasse nei td. Bygelyks:
td: nth-of-type (odd) {
background-color: #ccc;
}
Formulieren brûke yn in nth-of-type (n) Selector
De syntaksis foar in formule dy't brûkt wurdt yn 'e selektor is in + b.
a is in nûmer dat de fyts of yndeksgrutte fertsjintwurdiget.
n is eigentlik de letter "n" en stiet in kontrôle, dy't stjerren by 0 is.
+ is in operator, dy't ek wêze kin "-"
b is in integer en fertsjintwurdiget de ferskaatwearde - bygelyks, hoefolle rigen nei de seleksje begjinne moatte de efterkleur begjinne. Dit is ferplichte as in operator in opnommen is yn 'e formule.
As jo bygelyks in eftergrûn foar alle 3e rige sette wolle, dan sil jo formule 3n + 0 wêze. Jo CSS kin dit folgje:
tr: nth-of-type (3n + 0) {
eftergrûn: slategray;
}
Helpful Tools foar gebrûk fan nth-of-type Selector
As jo in bytsje gefoel hawwe troch de formuleaspekt fan it gebrûk fan 'e pseudo-klasse nth-of-type selector, besykje it: nth Tester site as nuttich ark dat jo helpe kinne foar definysje fan' e syntaksis om it soart te meitsjen dat jo wolle. Brûk de dropdown-menu om n-type te selektearjen (jo kinne ek eksperimintearje mei oare pseudo-klassen hjir, lykas nt-bern).