Grupo Multiple CSS Selectors aron sa pagpalambo sa Load Speed
Ang pagka-epektibo usa ka importante nga butang sa malampuson nga website. Kana nga site kinahanglan nga episyente kon giunsa kini paggamit sa mga imahen online . Makatabang kini sa pagsiguro nga ang site maayong pagkahimo alang sa mga bisita ug dali nga mabutang sa ilang mga himan. Ang pagka-epektibo kinahanglan usab nga kabahin sa imong kinatibuk-ang proseso, nga makatabang kanimo sa pagpadayon sa pag-uswag sa usa ka site sa oras ug sa badyet.
Sa katapusan, ang pagka-epektibo adunay papel sa tanang aspeto sa paglalang sa usa ka website ug sa tagal nga kalampusan, lakip na sa mga estilo nga gisulat alang sa CSS sheets sa site. Ang makahimo sa pagmugna ug mga leaner, mas limpyo nga mga file sa CSS ang sulundon, ug usa sa mga paagi nga mahimo nimo nga makab-ot kini mao ang pag-grupo sa daghang mga tigpili sa CSS nga magkahiusa.
Pagpundok sa mga Pagpili
Kon ikaw maghimo og CSS selectors , imong gamiton ang sama nga mga estilo ngadto sa daghang lainlaing mga elemento nga dili pagsubli sa mga estilo sa imong style sheet. Imbis nga adunay duha o tulo o labaw pa nga mga lagda sa CSS, tanan nga nagbuhat sa sama nga butang (pananglitan, ibutang ang kolor sa usa ka butang nga pula), adunay usa ka CSS nga lagda nga mahimo alang sa imong pahina.
Adunay ubay-ubay nga mga hinungdan nganong kini nga "grupo sa mga nagpili" nakabenepisyo sa usa ka panid. Una nga panahon, ang imong style sheet mas gamay ug mas dali nga mabug-atan. Tinuod, ang estilo sa estilo dili usa sa mga nag-unang hinungdan sa pagpahinay sa pag-load sa mga site. Ang mga file sa CSS mao ang mga file sa teksto, mao nga bisan ang tinuod nga taas nga CSS sheets mga gamay, maalamon nga sukaranan sa file, kung ikumpara sa dili mapili nga mga hulagway. Bisan pa, ang matag usa ka gamay nga giisip, ug kung makalutaw nimo ang pipila ka gidak-on sa imong CSS ug i-load ang mga panid nga mas paspas, kana usa ka maayong butang nga buhaton.
Sa kinatibuk-an, labaw sa kasagarang load speeds alang sa mga site dili moubos sa 3 segundos; Ang 3 ngadto sa 7 ka segundo mahitungod sa aberids, ug sobra sa 7 ka segundo nga hinay kaayo. Kining ubos nga numero nagpasabot nga, aron makab-ot kini sa imong site, kinahanglan nimo buhaton ang tanan nga imong mahimo! Mao kini ang hinungdan nga ikaw makatabang sa paghimo sa imong site nga dali gamit ang mga napili nga CSS selectors.
Unsaon Pagpili sa mga CSS CSS
Sa pag-grupo sa mga tigpili sa CSS diha sa estilo sa imong estilo, mogamit ka og mga koma aron pagbulag sa daghang mga grupo nga nagpili sa estilo. Sa panig-ingnan sa ubos, ang estilo nagaapekto sa p ug div nga mga elemento:
div, p {color: # f00; }Ang comma sa batakan nagkahulogang "ug". Busa kini nga magpapili magamit sa tanan nga mga elemento sa parapo ug sa tanan nga elemento sa pagkabahin. Kung ang koma nawala, kini hinoon ang tanan nga mga elemento sa parapo nga usa ka anak sa usa ka dibisyon. Kana usa ka lahi kaayo nga matang sa selector, busa kini nga comma tinuod nga nag-usab sa kahulugan sa selector!
Ang bisan unsang porma sa tigpili mahimo nga ipalista sa bisan unsang lain nga selector. Sa niini nga pananglitan, ang usa ka klase nga tigpili gi-grupo uban sa ID selector:
p.red, #sub {color: # f00; }Busa kini nga estilo magamit sa bisan unsa nga parapo nga adunay hiyas sa klase nga "pula", UG bisan unsa nga elemento (tungod kay wala nato mahibal-an kung unsang matang) nga may ID nga hiyas sa "sub".
Mahimo nimong ipalimpyo ang bisan unsang gidaghanon sa mga tigpili, lakip na ang mga tigpili nga usa ka pulong ug mag-compound sa mga tigpili. Kini nga pananglitan naglakip sa upat ka lainlaing tigpili
p, .red, #sub, div a: link {color: # f00; }Busa kining CSS nga lagda magamit sa mosunod:
- Ang bisan unsang parapo nga elemento
- Ang bisan unsa nga elemento nga adunay klase sa "pula"
- Ang bisan unsang elemento nga adunay ID sa "sub"
- Ang "link" nga pseudo nga klase sa mga anchor element nga mga decendent sa usa ka dibisyon.
Ang katapusang tigpili mao ang usa ka compound selector. Imong makita nga kini dali nga gihiusa uban sa uban nga mga tigpili sa niini nga lagda sa CSS. Uban niana nga lagda, ginabutang nato ang kolor nga # f00 (nga pula) sa niining 4 nga mga tigpili, nga mas maayo sa pagsulat sa 4 ka managlahing magpili aron makab-ot ang sama nga resulta.
Ang laing kaayohan sa pag-grupo sa mga tigpili mao nga, kung kinahanglan ka magbag-o, mahimo ka mag-edit sa usa ka lagda sa CSS imbis nga daghang mga tawo. Kini nagpasabot nga kini nga paagi nagaluwas kanimo nga gibug-aton sa gibug-aton ug oras sa pag-adto sa site sa umaabot.
Ang bisan unsang Pagpili mahimong mapangkat
Sama sa imong makita gikan sa mga pananglitan sa ibabaw, ang bisan unsang balido nga tigpili mahimong ibutang sa usa ka grupo, ug ang tanan nga mga elemento sa dokumento nga mohaum sa tanan nga mga grupo nga mga elemento adunay susama nga estilo nga gipasukad nianang estilo nga kabtangan.
Gipalabi sa pipila ka mga tawo nga ilista ang mga grupo nga mga elemento sa lain nga mga linya alang sa pagkalandalo sa kodigo. Ang panagway sa website ug ang load speed nagpabilin nga pareho. Pananglitan, mahimo nimong isagol ang estilo nga gibulag sa mga koma ngadto sa usa ka estilo sa usa ka estilo sa usa ka linya sa kodigo:
th, td, pred, div # firstred {color: red; }
o mahimo nimo ilista ang mga estilo sa tagsa-tagsa nga mga linya alang sa pagklaro:
ika,
td,
p.red,
div # firstred
Ang
kolor: pula;
}
Ang bisan unsang pamaagi nga imong gigamit sa grupo nga mga multiple selector sa CSS nagpadali sa imong site ug naghimo nga mas sayon sa pagdumala sa mga estilo sa taas nga termino.
Ang orihinal nga artikulo ni Jennifer Krynin. Gipamod ni Jeremy Girard sa 5/8/17.