Uporaba: nth-of-type (n) s tabelami
Če želite olajšati branje miz, je pogosto v pomoč pri oblikovanju vrstic z izmenljivimi barvami v ozadju. Eden od najpogostejših načinov za oblikovanje tabel je nastavitev barve ozadja v vsaki drugi vrstici. To se pogosto imenuje "pasovi zebra".
To lahko dosežete tako, da nastavite vsako drugo vrstico s CSS razredom in nato določite slog za ta razred. To deluje, vendar ni najboljši ali najučinkovitejši način za to.
Pri uporabi te metode vsakič, ko boste morali urejati to tabelo, boste morda morali urejati vsako posamezno vrstico v tabeli in tako zagotoviti, da bo vsaka vrstica v skladu s spremembami. Če na primer v svojo tabelo vstavite novo vrstico, mora vsaka druga vrstica pod njim spremeniti razred.
CSS olajša oblikovanje miz z zebra. Ni vam treba dodati nobenih dodatnih atributov HTML ali razredov CSS, uporabljate samo: nth-of-type (n) izbirnik CSS .
Izbirnik nth-of-type (n) je strukturni psevdo-razred v CSS-u, ki vam omogoča, da sloge elemente zasnovate na podlagi njihovih odnosov s starševskimi in sestricnimi elementi. To lahko uporabite za izbiro enega ali več elementov glede na njihov vir vira. Z drugimi besedami, se lahko ujema z vsemi elementi, ki so nth otrok določene vrste njenega starša.
Črka n je lahko ključna beseda (kot je čudno ali celo), številka ali formula.
Na primer, če želite oznako vseh drugih odstavkov označiti z rumeno barvo ozadja, vaš dokument CSS vključuje:
p: nth-of-type (nenavadno) {
ozadje: rumeno;
}
Začnite s tabelo HTML
Najprej ustvarite svojo tabelo, kot bi jo običajno napisali v HTML-ju. V vrstice ali stolpce ne dodajajte nobenih posebnih razredov.
V slogovni tabeli dodajte ta CSS:
tr: nth-of-type (nepar) {
barva ozadja: #ccc;
}
Tako bo vsaka druga vrstica v sivi barvi ozadja začela s prvo vrstico.
Stolp izmenjave stolpcev na enak način
Enako vrsto stylinga lahko naredite v stolpcih v vaših tabelah. Če želite to storiti, preprosto spremenite tr v svoj CSS razred na td. Na primer:
td: nth-of-type (nepar) {
barva ozadja: #ccc;
}
Uporaba formul v nth-selectorju (n)
Sintaksa za formulo, ki se uporablja v izbirniku, je + b.
a je številka, ki predstavlja velikost cikla ali indeksa.
n je pravzaprav črka "n" in predstavlja števec, ki je zvezda pri 0.
+ je operator, ki je lahko tudi "-"
b je celo število in predstavlja offset vrednost, na primer, koliko vrstic bi morala izbirnik začeti uporabljati barvo ozadja. To je potrebno, če je operator vključen v formulo.
Če na primer želite nastaviti barvo ozadja za vsako tretjo vrstico, bi bila formula 3n + 0. Vaš CSS bi lahko izgledal takole:
tr: nth-of-type (3n + 0) {
ozadje: slategray;
}
Koristna orodja za uporabo izbirnika nth-of-type
Če se po formuli uporabljate psevdo-class nth-of-select selektor, počasi poskusite: nth Tester stran kot uporabno orodje, ki vam lahko pomaga določiti sintakso, da dosežete videz, ki ga želite. V spustnem meniju izberite nth-of-type (preizkusite lahko tudi druge psevdokline, npr. Nth-child).