Ahhoz, hogy a táblázatok könnyebben olvashatók legyenek, gyakran hasznosak a váltakozó háttérszínnel rendelkező sorok. Az asztalok egyikének leggyakoribb módja az, hogy minden más sor háttérszínét állítsa be. Ezt gyakran "zebra csíkoknak" nevezik.
Ezt elérheti, ha minden más sort CSS osztályba állít be, majd meghatározza az adott osztály stílusát. Ez működik, de nem a legjobb vagy leghatékonyabb megoldás. Ha ezt a módszert használja, minden alkalommal, amikor módosítani kell ezt a táblát, előfordulhat, hogy a táblázat minden egyes sorát módosítania kell, hogy minden sor megfeleljen a módosításoknak. Ha például egy új sort helyez be az asztalhoz, akkor minden alsó sorban az osztályt módosítani kell.
A CSS megkönnyíti a zebra csíkokkal ellátott táblázatokat. Nem kell extra HTML attribútumokat vagy CSS-osztályokat felvenni, csak a nth-of-type (n) CSS választót használja.
A: nth-of-type (n) választó egy szerkezeti pszeudosztály a CSS-ben, amely lehetővé teszi, hogy stíluselemeket alapozhassanak a szülő és a testvér elemekkel való kapcsolatuk alapján. Használhatja azt egy vagy több elem kiválasztásához a forrásrend alapján. Más szavakkal, minden olyan elemhez illeszkedhet, amely az adott szülőjének egy adott típusának n. Gyermeke.
Az n betű lehet egy kulcsszó (például páratlan vagy egyenletes), egy szám vagy egy képlet.
Például, ha minden más, sárga színű háttércímet meg szeretne állítani, akkor a CSS-dokumentum tartalmazza a következőket:
p: nth-of-type (páratlan) { háttér: sárga;}
Kezdje a HTML táblával
Először hozza létre a táblázatot, ahogyan általában a HTML-ben írná. Ne adjon speciális osztályokat a sorokhoz vagy oszlopokhoz.
A stíluslapban adja hozzá a következő CSS-t:
tr: nth-of-type (páratlan) { background-color: #ccc;}
Ezzel minden más sor szürke háttérszínt fog kialakítani, az első sorral kezdődően.
Stílus változó oszlopok ugyanúgy
Ugyanazt a stílust teheti az asztal oszlopaiban. Ehhez egyszerűen változtasd meg a tr parancsot a CSS osztályodra td-re. Például:
td: nth-of-type (páratlan) { background-color: #ccc;}
Formulák használata egy n-típusú (n) választóban
A választóban használt formula szintaxisa + b.
- a olyan szám, amely a ciklus vagy index méretét reprezentálja.
- n valójában az "n" betű, és számlálót jelent, amely 0-nál csillag.
- + egy operátor, amely szintén lehet "-"
- b egy egész szám, és az eltolás értékét jelöli - például hány sor lefelé kell választani a háttérszín kiválasztásával. Ez akkor szükséges, ha egy szolgáltató szerepel a képletben.
Például, ha minden harmadik sorban meg szeretné állítani a háttérszínt, a képlet 3n + 0 lenne. A CSS így néz ki:
tr: n-típusú (3n + 0) { háttér: slategray;}
Hasznos eszközök a nth-of-type választó használatához
Ha kicsit megijedtél a pszeudosztályú n-típusú szelektor használatának képletével, próbáld ki a nth Tester webhelyet, mint hasznos eszközt, amely segít a szintaxis meghatározásában a kívánt megjelenítés eléréséhez. Használja a legördülő menüt a nth-of-type kiválasztásához (itt is kísérhet más ál-osztályokat is, például nth-child).
