Kutumia: nth-of-aina (n) na Majedwali
Ili kufanya meza iwe rahisi kusoma, mara nyingi husaidia kwa safu za mtindo na rangi zingine za asili. Njia moja ya kawaida ya meza za mtindo ni kuweka rangi ya nyuma ya mstari mwingine. Hii mara nyingi hujulikana kama "kupigwa kwa punda."
Unaweza kukamilisha hili ni kwa kuweka mstari mwingine kila darasa na CSS na kisha kufafanua mtindo wa darasa hilo. Hii inafanya kazi lakini si njia bora zaidi au yenye ufanisi zaidi ya kwenda juu yake.
Wakati wa kutumia njia hii, kila wakati unahitaji kuhariri meza hiyo unaweza kuhariri mstari mmoja katika meza ili kuhakikisha kila safu ni sawa na mabadiliko. Kwa mfano, ikiwa utaingiza mstari mpya kwenye meza yako, mstari mwingine chini unahitaji kuwa na darasa limebadilishwa.
CSS inafanya meza rahisi za mitindo na kupigwa kwa zebra. Huna haja ya kuongeza sifa yoyote ya ziada ya HTML au madarasa CSS, unatumia tu: nth-of-aina (n) CSS selector .
Ya: nth-of-aina (n) chaguo ni kikundi cha pseudo kikubwa katika CSS kinakuwezesha vipengele vya mtindo kulingana na uhusiano wao na vipengele vya wazazi na ndugu. Unaweza kutumia ili kuchagua vipengele moja au zaidi kulingana na utaratibu wao wa chanzo. Kwa maneno mengine, inaweza kulinganisha kila kipengele ambacho ni mtoto wa nth ya aina fulani ya mzazi wake.
Barua n inaweza kuwa neno muhimu (kama isiyo ya kawaida au hata), namba, au fomu.
Kwa mfano, kwa mtindo wa kila fungu la alama ya rangi ya njano, hati yako ya CSS ingejumuisha:
p: nth-of-aina (isiyo ya kawaida) {
background: njano;
}
Anza na Jedwali lako la HTML
Kwanza, tengeneza meza yako kama unavyoandika kwa kawaida kwenye HTML. Usiongezee madarasa maalum kwa safu au safu.
Katika stylesheet yako, ongeza CSS zifuatazo:
T: aina ya aina isiyo ya kawaida (isiyo ya kawaida) {
rangi ya background: #ccc;
}
Hii itaweka safu kila mstari mwingine na rangi ya rangi ya kijivu kuanzia kwa mstari wa kwanza.
Sifa za Mipangilio ya Mipangilio kwa njia sawa
Unaweza kufanya aina hiyo ya styling kwa nguzo kwenye meza zako. Kwa kufanya hivyo, tu kubadilisha tr katika darasa lako la CSS kwa td. Kwa mfano:
td: nth-of-aina (isiyo ya kawaida) {
rangi ya background: #ccc;
}
Kutumia Fomu katika chaguo nth-of-type (n)
Syntax ya fomu iliyotumiwa katika chagua ni + b.
ni namba inayowakilisha mzunguko au ukubwa wa index.
N ni kweli barua "n" na inawakilisha counter, ambayo nyota saa 0.
+ ni operator, ambayo inaweza pia kuwa "-"
b ni integer na inawakilisha thamani ya kukabiliana-kwa mfano, ni safu ngapi chini lazima mchezaji atumie kutumia rangi ya nyuma. Hii inahitajika ikiwa mtumiaji ni pamoja na fomu.
Kwa mfano, ikiwa unataka kuweka rangi ya asili kwa kila mstari wa 3, formula yako itakuwa 3n + 0. CSS yako inaweza kuangalia kama hii:
T: aina ya aina (3n + 0) {
background: slategray;
}
Zana Zilizofaa kwa kutumia Chagua cha nth-of-type
Ikiwa unastaajabishwa kidogo na kipengele cha fomu ya kutumia kipigaji cha nth-of-type cha pseudo, jaribu: Nth Tester tovuti kama chombo muhimu ambayo inaweza kukusaidia kufafanua syntax ili kufikia kuangalia unayotaka. Tumia orodha ya kuacha ili kuchagua aina ya aina (unaweza pia kujaribu majaribio mengine ya pseudo hapa, pia, kama nth-child).