Çawa Tebaxên Zebra bi Cîhanê ava bikin

Bikaranîna bikarhêner: nth-of-type (n) Bi tabloyan

Ji bo ku weşanên hêsantir dixwînin, pir caran bi rengên şêwirdar ên bi rengên rengdêr ên alternatîf re. Yek ji awayên herî gelemperî ku tehlên stylesê ye ku rengê paşê rengê her cûda damezirandin. Ev caran bi navê "zîra zebra" tê gotin.

Hûn dikarin bicîh bikin ku bi her cûreyek her cûre bi hevpeymanek CSS ve damezirandin û paşê stûnê ji bo vê çeyê re vedigire. Ev karên din, lê rêbazek çêtirîn an herî baş e ku neçin ser vê yekê.

Dema ku vê rêbazê bikar bînin, her demê hûn hewceyê ku hûn tehlika xwe biguherînin, dibe ku hûn bikaribin her pîvan li ser maseya xwe bigihînin ku ji bo guhertinên her rûpela bi guhertinên bi hev re veguherînin. Ji bo nimûne, heke hûn di rêza xwe de li ser maseya nû binivîse, her cûda rêzê jêrîn divê hewceyê guherîna kategoriyê.

CSS bi hêsantirên tehlên bi zebra veguheran re hêsantir dike. Hûn hewce ne ku hûn tercîhên HTML- an taybetmendiyên an jî CSS-ê zêde bike, hûn tenê bikarhêner: nbij-type-type (n) hilbijartina CSS .

:: Nth-a-type (n) bijartek pseudo-class di CSS-ê de ye ku hûn ji hêla elementên şêwirdariyê re girêdayî ser pêwendiyên bav û bavê birayên bingehîn e. Hûn dikarin bikar bînin ku ji bo çavkaniya çavkaniya wan an yek an bêtir hilbijêre hilbijêrin. Bi awayekî din, dikare her elementê ku zaroka niştecîlekî taybetî ya bavê wê ye.

Nîjer n dikare lêbigere (wekhev an jî heta jî), hejmarek, an formula.

Ji bo nimûne, her tîpa paragrafê bi rengek rengek zêrîn bi şêwazê, belgeya CSS ya we dê dihêle:

p: nth-of-type (odd) {
paşê: zêr
}

Bi HTML Tableê Dest pê bikin

Pêşîn, maseya xwe çêbikin ku hûn ê di normal de bi HTML-ê binivîse. Dersek an blovên li ser çiqas taybetî nabe.

Di stylesheetê de, pirtûka jêrîn zêde bike:

tr: nth-of-type (odd) {
background-color: #ccc;
}

Ev ê di her rûpela yekem de bi rengek rengê spî re rêzik dike.

Di Same Wayê de Tiştên Parastinê yên Hilbijêre

Hûn dikarin heman şêweya stenbolê li ser kulên xwe di nav masên xwe de bikin. Ji bo vê yekê, hêsan di trî CSS-ê de bi tdê biguherînin. Bo nimûne:

td: nth-of-type (odd) {
background-color: #ccc;
}

Bikaranîna Bikaranîna di nuh-ê-ê de (n) Hilbijêre

Syntax ji bo formula ku di hilbijartinê de tête bikaranîn e + b.

Ji bo nimûne, heger tu dixwazî ​​rengê rengê her rêza sêyemîn bikin, hûn formula 3n + 0 be. CSS dikare dibe vî rengî:

tr: nth-of-type (3n + 0) {
paşnav: slategray;
}

Amûrên Alîkar ên ji bo Hilbijêre nth-of-type Selector

Heke hûn ji hêla formulê ya nuh-ê-ê-hilbijêre-ê-ê-yê-ê-ê-ê-ê-ê-ê-ê-ê-ê-ê-ê-ê-ê-ê-hilbijêre-ê-ê bikar bînin, hewl bidin: Mîhengkirina pevçûnê bikar bînin ku hûn nth-ê-ê hilbijêre (hûn jî jî li ezmûnên din ên pseudo-class jî, wekî, nif-zarokê) jî jî dixebitînin.