Za lažje branje tabel je pogosto koristno oblikovati vrstice z izmeničnimi barvami ozadja. Eden najpogostejših načinov za oblikovanje tabel je nastavitev barve ozadja za vsako drugo vrstico. To se pogosto imenuje "zebraste črte".
To lahko dosežete tako, da vsako drugo vrstico nastavite z razredom CSS 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 boste morali vsakič, ko boste morali urediti to tabelo, urediti vsako posamezno vrstico v tabeli, da zagotovite, da je vsaka vrstica skladna s spremembami. Če na primer v svojo tabelo vstavite novo vrstico, mora biti v vsaki drugi vrstici pod njo razred spremenjen.
CSS olajša oblikovanje miz z zebrastimi črtami. Ni vam treba dodajati dodatnih HTML atribute ali razrede CSS, samo uporabite: nth-of-type (n) Izbirnik CSS.
Izbirnik: nth-of-type (n) je strukturni psevdorazred v CSS, ki vam omogoča oblikovanje elementov na podlagi njihovih odnosov do nadrejenih in sorodstvenih elementov. Z njim lahko izberete enega ali več elementov glede na njihov izvorni vrstni red. Z drugimi besedami, lahko se ujema z vsakim elementom, ki je n-ti podrejeni element določene vrste njegovega nadrejenega.
Črka n je lahko ključna beseda (na primer neparna ali soda), številka ali formula.
Če želite na primer oblikovati vsako drugo oznako odstavka z rumeno barvo ozadja, bi vaš dokument CSS vključeval:
p: nth-of-type (liho) {
ozadje: rumeno;
}
Začnite s tabelo HTML
Najprej ustvarite tabelo, kot bi jo običajno zapisali v HTML. V vrstice ali stolpce ne dodajajte posebnih razredov.
V tabelo slogi dodajte naslednji CSS:
tr: nth-of-type (liho) {
barva ozadja: #ccc;
}
Tako bodo vse druge vrstice oblikovane s sivo barvo ozadja, začenši s prvo vrstico.
Na enak način oblikujte izmenične stolpce
Na enak način lahko naredite stolpce v tabelah. To preprosto storite tako, da v razredu CSS spremenite tr v td. Na primer:
td: nth-of-type (liho) {
barva ozadja: #ccc;
}
Uporaba formul v izbirniku n-tega tipa (n)
Sintaksa formule, uporabljene v izbirniku, je + b.
- a je številka, ki predstavlja velikost cikla ali indeksa.
- n je pravzaprav črka "n" in predstavlja števec, ki je prikazan na 0.
- + je operater, ki je lahko tudi "-"
- b je celo število in predstavlja vrednost odmika - na primer, koliko vrstic navzdol naj izbirnik začne uporabljati barvo ozadja. To je potrebno, če je v formulo vključen operator.
Če želite na primer nastaviti barvo ozadja za vsako 3. vrstico, bo vaša formula 3n + 0. Vaš CSS bi lahko bil videti tako:
tr: n-tipa (3n + 0) {
ozadje: slategray;
}
Uporabna orodja za uporabo n-tega tipa izbirnika
Če se počutite nekoliko zaskrbljeni nad vidikom formule uporabe izbirnika n-tipa tipa pseudo-class, preizkusite spletno mesto: nth Tester kot uporabno orodje, ki vam lahko pomaga določiti skladnjo, da dosežete želeni videz. V spustnem meniju izberite nth-of-type (tukaj lahko preizkusite tudi druge psevdo-razrede, na primer nth-child).