Kad lenteles būtų lengviau skaityti, dažnai pravartu kurti eiles su kintančiomis fono spalvomis. Vienas iš labiausiai paplitusių lentelių stiliaus būdų yra nustatyti kiekvienos kitos eilutės fono spalvą. Tai dažnai vadinama „zebro juostelėmis“.
Tai galite padaryti nustatydami kas antrą eilutę CSS klase ir tada apibrėždami tos klasės stilių. Tai veikia, bet tai nėra geriausias ar efektyviausias būdas tai padaryti. Naudojant šį metodą, kiekvieną kartą, kai reikia redaguoti tą lentelę, gali tekti redaguoti kiekvieną atskirą lentelės eilutę, kad kiekviena eilutė atitiktų pakeitimus. Pvz., Jei į lentelę įterpiate naują eilutę, klasė turi būti pakeista kiekvienoje kitoje eilutėje žemiau jos.
CSS palengvina stalų su zebro juostelėmis stilių. Jums nereikia pridėti jokio papildomo priedo HTML atributus ar CSS klases, jūs tiesiog naudokite: n-tipo tipo (n) CSS parinkiklis.
: N-asis tipo (n) selektorius yra struktūrinė CSS pseudoklasė, leidžianti kurti elementus pagal jų santykius su tėvų ir brolių elementais. Jį galite naudoti norėdami pasirinkti vieną ar daugiau elementų pagal jų šaltinių tvarką. Kitaip tariant, jis gali atitikti kiekvieną elementą, kuris yra n-tasis tam tikro tipo tėvų vaikas.
Raidė n gali būti raktinis žodis (pvz., Nelyginis ar lyginis), skaičius arba formulė.
Pvz., Jei norite stilizuoti visas kitas pastraipų žymas geltonos spalvos spalva, jūsų CSS dokumente būtų:
p: n-tasis tipas (nelyginis) {
fonas: geltonas;
}
Pradėkite nuo HTML lentelės
Pirmiausia sukurkite lentelę taip, kaip paprastai parašytumėte HTML. Nepridėkite jokių specialių klasių prie eilučių ar stulpelių.
Stiliaus lape pridėkite šį CSS:
tr: n-tasis tipas (nelyginis) {
fono spalva: #ccc;
}
Tai stilizuos visas kitas eilutes pilka fono spalva, pradedant nuo pirmos eilutės.
Stiliuokite kintamus stulpelius tuo pačiu būdu
Lentelių stulpeliuose galite atlikti tą patį stilių. Norėdami tai padaryti, tiesiog pakeiskite tr CS CSS klasėje į td. Pavyzdžiui:
td: n-tasis tipas (nelyginis) {
fono spalva: #ccc;
}
Formulių naudojimas n-ajame tipo (n) selektoriuje
Selektoriuje naudojamos formulės sintaksė yra + b.
- a yra skaičius, nurodantis ciklo ar indekso dydį.
- n iš tikrųjų yra raidė „n“ ir žymi skaitiklį, kuris pažymėtas tašku 0.
- + yra operatorius, kuris taip pat gali būti "-"
- b yra sveikas skaičius ir nurodo poslinkio vertę, pavyzdžiui, kiek eilučių žemyn turėtų pasirinkti fono spalvą. Tai reikalinga, jei operatorius yra įtrauktas į formulę.
Pvz., Jei norite nustatyti fono spalvą kiekvienai 3 eilutei, jūsų formulė būtų 3n + 0. Jūsų CSS gali atrodyti taip:
tr: n-tasis tipas (3n + 0) {
fonas: slategray;
}
Naudingi n-to tipo tipo parinkiklio naudojimo įrankiai
Jei jaučiatės šiek tiek bauginamas pseudoklasės n-to tipo tipo parinkiklio formulės aspektu, išbandykite: n-ąjį bandytojo puslapį kaip naudingą įrankį, kuris gali padėti apibrėžti sintaksę, norint pasiekti norimą išvaizdą. Išskleidžiamajame meniu pasirinkite n-tą tipą (taip pat galite eksperimentuoti ir su kitomis pseudo klasėmis, pvz., N-asis vaikas).