Lai padarītu tabulas vieglāk lasāmas, bieži ir lietderīgi veidot rindas ar mainīgām fona krāsām. Viens no visbiežāk sastopamajiem tabulu veidošanas veidiem ir katras citas rindas fona krāsas iestatīšana. To bieži dēvē par "zebras svītrām".
To var paveikt, iestatot katru otro rindu ar CSS klasi un pēc tam definējot šīs klases stilu. Tas darbojas, taču tas nav labākais vai efektīvākais veids, kā to izdarīt. Izmantojot šo metodi, katru reizi, kad jums ir nepieciešams rediģēt tabulu, jums, iespējams, būs jārediģē katra tabulas rinda, lai pārliecinātos, ka katra rinda atbilst izmaiņām. Piemēram, ja tabulā ievietojat jaunu rindu, katrā otrajā rindā zem tās ir jāmaina klase.
CSS ļauj ērti veidot galdus ar zebras svītrām. Jums nav jāpievieno papildu HTML atribūtus vai CSS klases, jūs vienkārši izmantojat: n-of-type (n) CSS atlasītājs.
Selektors: n-tā veida (n) selektors ir CSS strukturāla pseidoklase, kas ļauj veidot elementus, pamatojoties uz to attiecībām ar vecāku un brāļu elementiem. Jūs varat to izmantot, lai atlasītu vienu vai vairākus elementus, pamatojoties uz to avotu secību. Citiem vārdiem sakot, tas var sakrist ar katru elementu, kas ir n-tas bērns noteiktam vecāku tipam.
Burts n var būt atslēgvārds (piemēram, nepāra vai pāra), skaitlis vai formula.
Piemēram, lai stilizētu katru otro rindkopas tagu ar dzeltenu fona krāsu, CSS dokumentā būtu jāietver:
p: n-tā veida (nepāra) {
fons: dzeltens;
}
Sāciet ar HTML tabulu
Vispirms izveidojiet tabulu tā, kā parasti to rakstāt HTML. Nepievienojiet rindām vai kolonnām īpašas klases.
Stila lapā pievienojiet šādu CSS:
tr: n-tā veida (nepāra) {
fona krāsa: #ccc;
}
Tas veidos katru otro rindu ar pelēku fona krāsu, sākot ar pirmo rindu.
Stils pārmaiņus kolonnas tādā pašā veidā
Jūs varat veikt tāda paša veida stilu kā tabulas kolonnas. Lai to izdarītu, vienkārši nomainiet tr CSS klasē uz td. Piemēram:
td: n-tā veida (nepāra) {
fona krāsa: #ccc;
}
Formulu izmantošana n-tā veida (n) selektorā
Atlasē izmantotās formulas sintakse ir + b.
- a ir skaitlis, kas apzīmē cikla vai indeksa lielumu.
- n faktiski ir burts "n" un apzīmē skaitītāju, kas atzīmēts ar 0.
- + ir operators, kas var būt arī "-"
- b ir vesels skaitlis un apzīmē nobīdes vērtību - piemēram, cik rindu uz leju atlasītājam jāsāk piemērot fona krāsu. Tas ir nepieciešams, ja formulā ir iekļauts operators.
Piemēram, ja vēlaties iestatīt fona krāsu katrai 3. rindai, jūsu formula būtu 3n + 0. Jūsu CSS varētu izskatīties šādi:
tr: n-tā veida (3n + 0) {
fons: slategray;
}
Noderīgi rīki n-tā veida selektora lietošanai
Ja jūs jūtaties mazliet nobijies par pseidoklases n-tā tipa selektora izmantošanas formulas aspektu, izmēģiniet: n-to testera vietni kā noderīgs rīks, kas var palīdzēt definēt sintaksi, lai sasniegtu vēlamo izskatu. Izmantojiet nolaižamo izvēlni, lai atlasītu tipa n-to (šeit varat arī eksperimentēt ar citām pseidoklasēm, piemēram, n-child).