Izmantojot: n-of-type (n) ar tabulām
Lai tabulas būtu vieglāk lasāmas, bieži ir noderīgi rindas ar maināmām fona krāsām. Viens no visbiežāk sastopamajiem tabulu stiliem ir iestatīt katras citas rindas fona krāsu. To bieži dēvē par "zebra svītrām".
To var paveikt, nosakot katru otru rindu ar CSS klasi un pēc tam definējot šīs klases stilu. Tas darbojas, bet nav labākais vai efektīvākais veids, kā to izdarīt.
Izmantojot šo metodi, katru reizi, kad jums ir nepieciešams rediģēt šo tabulu, jums, iespējams, būs jārediģē katra rinda tabulā, lai nodrošinātu, ka katra rinda atbilst izmaiņām. Piemēram, ja savai tabulai ievietojat jaunu rindu, katrai nākamajai rindai ir nepieciešama izmaiņas klasē.
CSS ļauj viegli salabot tabulas ar zebra svītrām. Jums nav nepieciešams pievienot papildu HTML atribūtus vai CSS klases, jūs vienkārši izmantojat: nth-of-type (n) CSS selektoru .
: N-of-tipa (n) atlasītājs ir strukturāls pseidoklases CSS, kas ļauj veidot elementus, pamatojoties uz to attiecībām ar vecākiem un brāļa elementiem. Varat to izmantot, lai atlasītu vienu vai vairākus elementus, pamatojoties uz to avota pasūtījumu. Citiem vārdiem sakot, tas var saskaņot katru elementu, kas ir tā vecāka konkrēta tipa n-tā bērns.
Burts n var būt atslēgvārds (piemēram, nepāra vai pat), skaitlis vai formula.
Piemēram, lai izveidotu ikvienu citu punktu tagu ar dzeltenu fona krāsu, jūsu CSS dokuments ietver:
p: n-of-tipa (nepāra) {
fons: dzeltens;
}
Sāciet ar savu HTML tabulu
Vispirms izveidojiet savu tabulu, kā parasti rakstīt to HTML formātā. Rindām vai kolonnām nepievienojiet īpašas klašu.
Savā stilu tabulā pievienojiet šādu CSS:
tr: n-of-tipa (nepāra) {
fona krāsa: #ccc;
}
Tas stipinās katru otro rindu ar pelēku fona krāsu, sākot ar pirmo rindu.
Stilīgas maiņas kolonnas vienā un tajā pašā veidā
Jūs varat veikt tāda paša veida stilu savām tabulām. Lai to izdarītu, vienkārši mainiet tr savā CSS klasē uz td. Piemēram:
td: n-of-tipa (nepāra) {
fona krāsa: #ccc;
}
Formulu izmantošana n-veida (n) atlasītājā
Izvēlētajā formulas sintakse ir + b.
a ir skaitlis, kas norāda ciklu vai indeksa lielumu.
n patiesībā ir burts "n" un ir skaitītājs, kas atzīmēts ar 0.
+ ir operators, kas var būt arī "-"
b ir vesels skaitlis un atspoguļo nobīde vērtību, piemēram, cik daudz rindu nosaka, ja selektors sāk piemērot fona krāsu. Tas ir nepieciešams, ja operators ir iekļauts formulā.
Piemēram, ja vēlaties iestatīt fona krāsu katrai 3. rindai, formula būs 3n + 0. Jūsu CSS varētu izskatīties šādi:
tr: n-of-type (3n + 0) {
fons: slategray;
}
Noderīgi rīki n-veida tipa atlasītāja izmantošanai
Ja jūs jūtaties mazliet satraukti ar formulas aspektu, izmantojot pseido klases n-to-of-tipa selektoru, izmēģiniet: n-tā Tester vietni kā noderīgu rīku, kas var palīdzēt jums definēt sintaksi, lai sasniegtu vēlamo izskatu. Izmantojiet nolaižamo izvēlni, lai atlasītu nth-of-type (jūs varat arī eksperimentēt ar citām pseidoklasēm šeit arī, piemēram, nth-child).