Naudojimas: n-to tipo (n) su lentelėmis
Kad lenteles būtų lengviau skaityti, dažnai naudinga stiliaus eilutes su kintamomis fono spalvomis. Vienas iš labiausiai paplitusių lentelių stilių - nustatyti kiekvienos kitos eilutės fono spalvą. Tai dažnai vadinama "zebras juostelėmis".
Tai galite padaryti, nustatydami kiekvieną kitą eilutę su CSS klase ir nustatydami šios klasės stilių. Tai veikia, tačiau tai nėra geriausias ar efektyviausias būdas tai daryti.
Naudodamiesi šiuo metodu, kiekvieną kartą, kai jums reikia redaguoti šią lentelę, galbūt turėsite redaguoti kiekvieną lentelės eilutę, kad kiekviena eilutė atitiktų pakeitimus. Pavyzdžiui, jei į lentelę įterpiate naują eilutę, kiekviena kita eilutė žemiau turi pakeisti klasę.
CSS leidžia lengvai klijuoti stalus su zebra juostelėmis. Jums nereikia pridėti jokių papildomų HTML atributų ar CSS klasių, jūs tiesiog naudojate: n-ojo tipo (n) CSS parinkiklį .
: N-ojo tipo (n) parinkiklis yra struktūrinis pseudo-klasė CSS, kuri leidžia jums stiliaus elementus, pagrįstus jų santykiais su tėvų ir giminių elementais. Galite jį naudoti norėdami pasirinkti vieną ar daugiau elementų pagal jų šaltinio tvarką. Kitaip tariant, jis gali suderinti kiekvieną elementą, kuris yra n-tojo tos pačios rūšies tėvo tipo vaikas.
Raštas n gali būti raktinis žodis (pvz., Nelyginis ar netgi), skaičius arba formulė.
Pavyzdžiui, norėdami stilizuoti kiekvieną kitą žymos dalį geltoną fono spalvą, jūsų CSS dokumente turėtų būti:
p: n-asis (nelyginis) {
fonas: geltona;
}
Pradėk nuo HTML lentelės
Pirma, sukurkite savo stalą, kaip paprastai rašote į HTML. Nerodyti eilučių ar stulpelių jokių specialių klasių.
Savo lentelėje stilių pridėkite šį CSS:
tr: n-to tipo (nelyginis) {
fono spalva: #ccc;
}
Tai bus stilius kiekvieną kitą eilutę su pilka fono spalva, pradedant nuo pirmosios eilutės.
Stilius kintamieji stulpeliai vienodai
Jūs galite padaryti tą patį stilių stulpeliuose savo lentelėse. Norėdami tai padaryti, tiesiog pakeisk tr savo CSS klasei td. Pavyzdžiui:
td: n-to tipo (nelyginis) {
fono spalva: #ccc;
}
Formulių naudojimas n-tojo tipo (n) parinkiklyje
Parinktyje naudojamos formulės sintaksė yra + b.
a yra skaičius, kuris žymi ciklo ar indekso dydį.
n iš tikrųjų yra raidė "n" ir reiškia skaitiklį, kuris žvaigždėse yra 0.
+ yra operatorius, kuris taip pat gali būti "-"
b yra sveikasis skaičius ir nurodo kompensacinę reikšmę, pavyzdžiui, kiek eilučių žemyn, kai parinkėjas pradeda taikyti fono spalvą. Tai reikalinga, jei operatorius įtrauktas į formulę.
Pavyzdžiui, jei norite nustatyti fono spalvą kiekvienai trečiajai eilutei, jūsų formulė būtų 3n + 0. Jūsų CSS gali atrodyti taip:
tr: n-to tipo (3n + 0) {
fonas: slategray;
}
Naudingi įrankiai n-to-to tipo pasirinkimo įrankiui naudoti
Jei jaučiatės šiek tiek nusiminusi formulės aspektas naudojant pseudo klasės n-to tipo tipo selektorių, pabandykite: n-ojo Tester svetainę kaip naudingą įrankį, kuris gali padėti apibrėžti sintaksę norint pasiekti norimą išvaizdą. Naudokite išskleidžiamąjį meniu, kad pasirinktumėte "n-to-of-type" (taip pat galite eksperimentuoti su kitais pseudo-klases, pvz., "Nth-child").