Notkun: nth-of-type (n) Með töflum
Til að gera töflur auðveldara að lesa er oft hjálplegt að stilla línur með skiptis bakgrunnslitum. Eitt af algengustu leiðunum til að stilla töflur er að stilla bakgrunnslitinn í hverri annarri röð. Þetta er oft nefnt "zebra rönd".
Þú getur náð þessu með því að setja aðra aðra röð með CSS flokki og skilgreina þá stíl fyrir þann bekk. Þetta virkar en er ekki besta eða skilvirka leiðin til að fara um það.
Þegar þú notar þessa aðferð, getur þú þurft að breyta hverjum einasta röð í töflunni í hvert skipti sem þú þarft að breyta því, til að tryggja að hver röð sé í samræmi við breytingarnar. Til dæmis, ef þú setur inn nýja röð í töflunni þarftu að breyta bekknum í annarri röðinni fyrir neðan það.
CSS gerir það auðvelt að stilla töflur með zebra röndum. Þú þarft ekki að bæta við fleiri HTML eiginleika eða CSS flokkum, þú notar bara: nth-af-gerð (n) CSS val .
The: nth-af-gerð (n) val er uppbygging gervi-flokki í CSS sem gerir þér kleift að stilla þætti byggt á samböndum við foreldra og systkini þætti. Þú getur notað það til að velja eina eða fleiri þætti eftir upprunalegri röð. Með öðrum orðum getur það passað við hvert frumefni sem er n-barn tiltekinnar tegundar foreldris þess.
Bréfið n getur verið leitarorð (eins og skrýtið eða jafnt), númer eða formúla.
Til dæmis, til að stilla hvert annað málsmerki með gulum bakgrunnslit, myndi CSS skjalið innihalda:
p: nth-of-type (stakur) {
Bakgrunnur: gulur;
}
Byrjaðu með HTML töflunni þínu
Fyrst skaltu búa til borðið þitt eins og þú skrifar venjulega það í HTML. Ekki bæta við neinum sérstökum flokkum í raðirnar eða dálkana.
Í stíllarkinu þínu skaltu bæta við eftirfarandi CSS:
tr: nth-of-type (stakur) {
bakgrunnslit: #ccc;
}
Þetta mun stíll í annarri röð með gráum bakgrunnslitum sem byrjar með fyrstu röðinni.
Stíll skiptis dálka á sama hátt
Þú getur gert sömu tegund af stíl í dálka í töflunum þínum. Til að gera það skaltu einfaldlega breyta tr í CSS bekknum þínum til td. Til dæmis:
td: nth-of-type (stakur) {
bakgrunnslit: #ccc;
}
Notkun formúla í n-tegund (n) vali
Setningafræði fyrir formúlu sem notuð er í valinu er + b.
a er tala sem táknar hringrás eða vísitölu stærð.
n er í raun bókstafurinn "n" og táknar gegn, sem stjörnur á 0.
+ er rekstraraðili, sem getur einnig verið "-"
b er heiltala og táknar offset gildi - til dæmis, hversu margar raðir niður ætti valbúnaðurinn að byrja að nota bakgrunnslitinn. Þetta er nauðsynlegt ef rekstraraðili er innifalinn í formúlunni.
Til dæmis, ef þú vilt setja bakgrunnslit fyrir hverja 3. röð, þá er formúlan þín 3n + 0. CSS þín gæti líkt svona:
tr: nth-of-type (3n + 0) {
bakgrunnur: slategray;
}
Gagnlegar verkfæri til að nota valjari n-af-gerð
Ef þú ert svolítið svolítið dreginn af formúluþáttinum með því að nota gervigreindinn í niðri tegund, prófaðu: nth Tester síðuna sem gagnlegt tól sem getur hjálpað þér að skilgreina setningafræði til að ná því sem þú vilt. Notaðu fellivalmyndina til að velja nth-of-type (þú getur líka gert tilraunir með öðrum gervitunglum hér líka, svo sem nth-barn).