Bl-użu: nth-of-type (n) Bil-Tabelli
Biex it-tabelli jkunu aktar faċli biex jinqraw, ħafna drabi jkun ta 'għajnuna għar-ringieli ta' l-istil b'kuluri ta 'sfond alternanti. Wieħed mill-modi l-aktar komuni għat-tabelli tal-istil huwa li jistabbilixxi l-kulur tal-isfond ta 'kull ringiela oħra. Dan spiss jissejjaħ "strixxi zebra."
Tista 'twettaq dan billi tistabbilixxi kull ringiela oħra b'kapaċità CSS u mbagħad tiddefinixxi l-istil għal dik il-klassi. Dan jaħdem iżda mhuwiex l-aħjar mod jew l-iktar effiċjenti biex imur.
Meta tuża dan il-metodu, kull darba li trid teditja dik it-tabella jista 'jkollok torganizza kull ringiela waħda fit-tabella biex tiżgura li kull ringiela tkun konsistenti mal-bidliet. Per eżempju, jekk daħħal ringiela ġdida fit-tabella tiegħek, kull ringiela oħra ta 'hawn taħt teħtieġ li l-klassi tinbidel.
CSS jagħmilha faċli għat-tabelli ta 'l-istil bi strixxi zebra. M'għandekx bżonn li żżid xi attributi HTML żejda jew klassijiet tas-CSS, tuża biss is- selettur tas-CSS nth-of-type (n).
Is-selettur nth-of-type (n) huwa psewdo-klassi strutturali f'CSS li jippermettilek elementi stil ibbażati fuq ir-relazzjonijiet tagħhom ma 'elementi ġenituri u ta' aħwa. Tista 'tużaha biex tagħżel wieħed jew aktar mill-elementi bbażati fuq l-ordni tas-sors tagħhom. Fi kliem ieħor, jista 'jaqbel ma' kull element li huwa l-ewwel tifel ta 'tip partikolari tal-ġenitur tiegħu.
L-ittra n tista 'tkun kelma prinċipali (bħal fard jew saħansitra), numru, jew formula.
Per eżempju, għall-istil kull tikketta tal-paragrafu oħra b'kulur isfar fl-isfond, id-dokument CSS tiegħek jinkludi:
p: nth-of-type (fard) {
sfond: isfar;
}
Ibda bit-Tabella HTML Tiegħek
L-ewwel, toħloq it-tabella tiegħek kif normalment tiktebha f'HTML. Ma żżidx xi klassijiet speċjali mar-ringieli jew il-kolonni.
Fl-istil tal-paġna tiegħek, żid is-CSS li ġejjin:
tr: nth-of-type (fard) {
sfond kulur: #ccc;
}
Dan se stil kull ringiela oħra b'kulur sfond griż li jibda bl-ewwel ringiela.
Kolonni li jalterna l-Istil fl-istess mod
Tista 'tagħmel l-istess tip ta' grafika għall-kolonni fit-tabelli tiegħek. Biex tagħmel dan, sempliċement ibiddel it-tr fil-klassi CSS tiegħek għal td. Pereżempju:
td: nth-of-type (fard) {
sfond kulur: #ccc;
}
Uża Fórmoli f'selector ta 'nth-of-type (n)
Is-sintassi għal formula użata fis-selettur hija + b.
a huwa numru li jirrappreżenta ċ-ċiklu jew id-daqs tal-indiċi.
Fil-fatt hija l-ittra "n" u tirrappreżenta kontro, li tidher f'0.
+ huwa operatur, li jista 'jkun "-"
b huwa numru sħiħ u jirrappreżenta l-valur tal-kumpens - pereżempju, kemm ringieli 'l isfel għandhom is-selettur jibdew japplikaw il-kulur fl-isfond. Dan huwa meħtieġ jekk operatur huwa inkluż fil-formula.
Per eżempju, jekk trid tistabbilixxi kulur fl-isfond għal kull 3 ringiela, il-formula tiegħek tkun 3n +0. Is-CSS tiegħek jista 'jidher bħal dan:
tr: nth-of-type (3n + 0) {
isfond: slategray;
}
Għodda utli għall-użu tas-selettur nth-of-type
Jekk int tħossok daqsxejn mgħawweġ mill-aspett tal-formula li tuża s-selettur tal-psewdo-klassi nth-of-type, ipprova s-sit ta 'nth Test bħala għodda utli li tista' tgħinek tiddefinixxi s-sintassi biex tikseb il-ħarsa li trid. Uża l-menu dropdown biex tagħżel nth-of-type (tista 'wkoll tesperimenta ma' psewdo-klassijiet oħra hawn ukoll, bħal nth-child).