Uzanta: nth-of-type (n) Kun Tabloj
Por fari pli facilajn tabulojn legi, ofte estas helpema al stilaj vicoj kun alternaj fonkoloraj koloroj. Unu el la plej oftaj manieroj al stilaj tabloj estas agordi la fonkoloron de ĉiu alia vico. Ĉi tio ofte estas nomata "zebraj strioj".
Vi povas plenumi ĉi tion per difini ĉiun alian vicon kun CSS-klaso kaj tiam difini la stilon por tiu klaso. Ĉi tio funkcias sed ne estas la plej bona aŭ plej efika maniero por trairi ĝin.
Kiam vi uzas ĉi tiun metodon, ĉiufoje kiam vi bezonas redakti tiun tablon, vi eble devas redakti ĉiun vicon en la tablo por certigi, ke ĉiu vico estas konsekvenca kun la ŝanĝoj. Ekzemple, se vi enmetas novan vicon al via tablo, ĉiu alia vico devas havi la klason ŝanĝita.
CSS faciligas stilajn tabulojn kun zebraj strioj. Vi ne bezonas aldoni kromajn HTML- atributojn aŭ CSS-klasojn, vi nur uzas la: nth-of-type (n) CSS-elektilon .
La: nth-of-type (n) selector estas struktura pseŭda klaso en CSS, kiu permesas al vi stilajn elementojn bazitajn sur iliaj rilatoj al gepatroj kaj siblingaj elementoj. Vi povas uzi ĝin por elekti unu aŭ pli da elementoj surbaze de ilia fonta ordo. Alivorte, ĝi povas egali ĉiun elementon, kiu estas la n-infana infano de aparta tipo de ĝia gepatro.
La litero n povas esti ŝlosilvorto (kiel nepara aŭ eĉ), nombro, aŭ formulo.
Ekzemple, por stiligi ĉiun alian alinean etikedon kun flava fonkoloro, via CSS-dokumento inkluzivus:
p: nth-de-tipo (nepara) {
fono: flava;
}
Komencu Kun Via HTML-Tabelo
Unue kreu vian tablon kiel vi kutime skribu ĝin en HTML. Ne aldonu specialajn klasojn al la vicoj aŭ kolumnoj.
En via stilfolio aldonu la jenan CSS:
tr: nth-de-tipo (nepara) {
fonkoloro: #ccc;
}
Ĉi tio stiligos ĉiun alian vicon kun griza fona koloro komenciĝanta per la unua vico.
Stilo Alternaj Kolumnoj en la Sama Vojo
Vi povas fari la saman tipon de stilo al kolumnoj en viaj tabloj. Por fari tion, simple ŝanĝi la tr en via CSS-klaso al td. Ekzemple:
td: nth-de-tipo (nepara) {
fonkoloro: #ccc;
}
Uzanta Formulojn en nth-de-tipo (n) Elektanto
La sintakso por formulo uzita en la elektilo estas + b.
a estas nombro, kiu reprezentas la ciklon aŭ indeksan grandecon.
n estas fakte la litero "n" kaj reprezentas kontrakton, kiu steloj ĉe 0.
+ estas telefonisto, kiu eble ankaŭ estu "-"
b estas entjero kaj reprezentas la kompensan valoron-ekzemple kiom da vicoj malsupren, la elektilo komencu apliki la fonkoloron. Ĉi tio postulas se telefonisto estas inkluzivita en la formulo.
Ekzemple, se vi volas agordi fonkoloron por ĉiu tria vico, via formulo estus 3n + 0. Via CSS eble aspektas tiel:
tr: nth-de-tipo (3n + 0) {
fono: slategray;
}
Helpema Iloj por Uzanta nth-de-tipan Elektilon
Se vi iomete timigas la formulon de uzado de la pseŭda klaso nth-of-type selector, provu la: nth Tester-ejo kiel utila ilo, kiu povas helpi vin difini la sintakson por atingi la aspekton, kiun vi volas. Uzu la menuo menuo por elekti nth-of-type (vi ankaŭ povas sperti ĉi tie ankaŭ kun aliaj pseŭdaj klasoj, kiel ekzemple n-infano).