Kasutades: n-to-tüüpi (n) koos tabelitega
Tabelite lihtsamaks lugemiseks on sageli soovitatav stiilida vahelduvate taustavärvidega ridu. Tabelite stiilide üks levinumaid viise on määrata iga muu rea taustavärv. Seda nimetatakse sageli kui "zebra triibu".
Seda saate teha, seadistades iga teise rida CSS-klassiga ja määrates selle klassi stiili. See toimib, kuid see ei ole parim või tõhusaim viis selle üle minna.
Selle meetodi kasutamisel peate iga tabeli muutmise vajaduse korral muutma iga rea tabelis, et tagada iga rea vastavus muudatustega. Näiteks kui lisate oma tabele uue rea, tuleb igal järgneval rida klassi muuta.
CSS-i abil on lihtne seiba seibadega laudade stiilid. Te ei pea lisama täiendavaid HTML- atribuute või CSS-klasse, vaid kasutage n-ö (n) CSS-valijat .
N-seeria (n) valija on CSS-i struktuuriline pseudoklass, mis võimaldab stiilida elemente, mis põhinevad nende suhetel vanemate ja vendade elementidega. Saate seda kasutada, et valida üks või mitu elementi, mis põhinevad nende allikakorraldusel. Teisisõnu võib see sobida iga elemendiga, mis on selle vanema teatud tüüpi n-iga laps.
Täht n võib olla märksõna (näiteks paaritu või isegi), number või valem.
Näiteks selleks, et stiiliks kollase taustavärvi iga teine lõikussild, sisaldab teie CSS-dokument järgmist:
p: n-tüüpi (paaritu) {
taust: kollane;
}
Alusta oma HTML-tabelist
Esmalt looge oma tabel, nagu tavaliselt kirjutaksite see HTML-is. Ärge lisage ridadele ega veergudele erilisi klasse.
Lisage oma stiilitabelist järgmine CSS:
tr: n-tüüpi (paaritu) {
taustavärv: #ccc;
}
See muudab stiili igal teisel real hallil taustavärviga alates esimesest reast.
Stiil vahelduvad veerud samamoodi
Saate oma laudades samu stiili muuta. Selleks lihtsalt muutke Tr oma CSS-klassis td-le. Näiteks:
td: n-tüüpi (paaritu) {
taustavärv: #ccc;
}
Valemite kasutamine n-t-tüüpi (n) valijal
Valikus kasutatava valemi süntaks on + b.
a on arv, mis tähistab tsüklit või indeksi suurust.
n on tegelikult täht "n" ja tähistab loendurit, mis tähistab 0-ks.
+ on operaator, mis võib olla ka "-"
b on täisarv ja kujutab nihke väärtust, näiteks kui palju ridu alla peaks selektor alustama taustavärvi. See on vajalik, kui operaator on valemisse kaasatud.
Näiteks kui soovite määrata iga kolmanda rea taustavärvi, on teie valem 3n + 0. Teie CSS võib välja näeb välja selline:
tr: n-tüüpi (3n + 0) {
taust: slategray;
}
Kasulikud tööriistad mitut tüüpi valija kasutamiseks
Kui tunnete pinge-klassi selektori kasutamise valemis olevat pisut hämmingut, proovige järgmist n-tise Testeri saiti kasuliku tööriista abil, mis aitab teil soovitud kujunduse saavutamiseks süntaasi määrata. Kasutage nd-of-tüüpi valimiseks rippmenüüd (võite katsetada ka teisi siin olevaid pseudo-klasse, näiteks n-nda lapsi).