CSS Selectors. matang sa selectors

, sa matag usa sa nga imong gusto sa sa usa ka piho nga kolor. Unsa nga paagi sa pagbuhat niini? Standard CSS selectors dili angay alang sa mga tag, sila nagpakita sa mga lantugi alang sa tanan nga mga bloke sa makausa. Ang solusyon mao ang walay-pagtagad. Pagtudlo og mga sakop sa klase. Pananglitan, ang unang nakadawat div class = 'pula nga', ikaduha - class = 'asul nga', ikatulo - class = 'lunhaw nga'. Karon sila mahimong pinili nga paggamit sa CSS lamesa.

syntax mao ang sama sa mosunod: Nagpamatuod sa usa ka punto ( "."), Gisundan sa pagsulat sa ngalan sa sa klase. Sa pagdumala sa mga unang yunit, sa paggamit sa pagtukod .Pula. Ikaduha - .blue ug sa ingon sa.

Importante! Kini girekomendar sa paggamit sa makahuluganon nga mga prinsipyo sa klase hiyas. Kini giisip nga dili maayo nga porma sa paggamit sa transliterasyon (pananglitan, krasiviy-blok) o random nga mga kalihokan sa mga sulat / numero (ojfh834871). Sa niini nga code, kamo gigapos sa pagkuha naglibog, dili sa naghisgot sa mga kalisdanan nga giatubang sa mga tawo nga moapil sa proyekto human sa kaninyo. Ang labing maayo nga kapilian - sa paggamit sa bisan unsa nga pamaagi, sama sa bem.

Bentaha - medyo taas nga pagka-flexible.

Disadvantages - ang daghang mga elemento mahimong usa ug sa mao usab nga klase, nga nagpasabot nga sila nga i-edit dungan. Ang problema mao ang masulbad sa paggamit sa mga pamaagi ingon man usab sa panulondon sa preprocessors. Siguroha sa pagkuha sa inyong mga kamot dili kaayo, saß o ubang preprocessor, sila sa hilabihan gayud pasimplehon sa buhat.

ID selector

Mga bersyon niini nga opinyon coders ug mga programmers mga dili tin-aw. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Ang ubang mga CSS pagtudlo dili sa rekomend sa paggamit sa ID, tungod kay sa dili tukma nga aplikasyon mahimo sila ang hinungdan sa mga problema uban sa panulondon. Apan, daghang mga eksperto ang mga aktibo nga arrange kanila sa tibuok layout. Ikaw modesisyon. # »), затем имя блока. syntax mao ang sama sa mosunod: sa pound ilhanan ( "#"), unya ang ngalan sa block. #red. Pananglitan, #red.

отличается от класса по нескольким параметрам. ID ang lain-laing gikan sa klase sa pipila ka mga paagi. ID. Una, ang pahina dili mahimo nga sa duha ka managsama ID. Sila gi-assign sa usa ka talagsaon nga ngalan. Ikaduha, ingon nga usa ka selector adunay usa ka mas taas nga prayoridad. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Kini nagpasabot nga kon hingalan kamo sa usa ka yunit sa klase nga pula ug hingalan sa CSS lamesa pula nga kolor background, ug unya assign niini sa sama nga id azul ug hingalan sa kolor sa azul, sa yunit mobalik azul.

Bentaha - nga imong mahimo sa pagpugong sa mga piho nga elemento, wala magtagad sa estilo sa mga tags ug sa mga klase.

ID и class. Disadvantages - sayon na nawala sa usa ka dako nga gidaghanon sa mga ID ug klase.

Importante! ID вам, в общем-то, не нужны. Kon ikaw naggamit bem pamaagi (o analogues niini), ID sa kaninyo, sa kinatibuk-an, dili gikinahanglan. Kini nga teknik naglakip sa paggamit sa Layout talagsaon klase nga mas labaw pa sayon.

universal selector

{}. Syntax: Starlets ilhanan ( "*") ug tukod, ie, {*} ...

Gigamit sa assign ang pipila ka mga hiyas sa makausa ang tanan nga mga elemento sa panid. Sa diha nga kini mahimong mapuslanon? box-sizing: border-box. Pananglitan, kon kamo gusto nga ang mga panid kabtangan kahon-sizing: utlanan-kahon. div *{}. Dili lamang nga gigamit sa pagdumala sa tanan nga mga sangkap sa mga dokumento, apan usab sa pagpugong sa tanang mga anak sa mga espesipikong block, alang sa panig-ingnan, div * {}.

Bentaha - nga imong mahimo sa pagpugong sa usa ka dako nga gidaghanon sa mga butang sa usa ka panahon.

Disbentaha - dili igo flexible kapilian. Dugang pa, ang paggamit sa selector niini, sa pipila ka mga kaso mahinay sa panid buhat.

pinaagi sa hiyas

Himoa kini nga posible nga sa pagkontrolar sa mga elemento sa usa ka piho nga hiyas. Pananglitan, ikaw adunay usa ka gidaghanon sa mga input tags uban sa usa ka lain-laing mga matang hiyas. Usa kanila - teksto, ang ikaduha - password, ang ikatolo - gidaghanon. Siyempre, kamo makahimo sa gibutang sa matag klase o ID, apan kini mao ang dili kanunay sayon. CSS selectors sa mga hiyas sa paghimo niini nga posible nga sa hingalan sa mga hiyas alang sa pipila ka mga tags uban sa maximum tukma. Pananglitan, sama niini:

input [ 'text' matang =] {}

selector Kini pagpili sa tanan nga mga hiyas sa mga matang sa input nga teksto.

Ang himan mao ang na flexible ug mahimong gamiton sa bisan unsa sa mga tag, diin may mga hiyas. Apan nga dili ang tanan! Ang CSS paghingalan ang abilidad sa pagkontrolar sa mga elemento sa bisan labaw pa kasayon!

Hunahunaa nga ang imong panid may input sa hiyas placeholder = "Pagsulod sa usa ka ngalan nga" ug input placeholder = "Pagsulod password". mahimo usab sila nga mga pinili nga sa paggamit sa selector! Sa pagbuhat niini, sa paggamit sa mosunod nga estraktura:

input [placeholder = "Pagsulod sa ngalan"] {} o input [placeholder = "Pagsulod sa password"]

Tingali nga mas flexible nga buhat uban sa mga hiyas. Ang ni-ingon ikaw adunay usa ka gidaghanon sa mga tag uban sa susama nga mga hiyas titulo (alang sa panig-ingnan, "Caspian" ug "Caspian"). Sa pagpili sa duha, paggamit sa mosunod nga mga pinili:

[Title * = "Kaspiysk"]

CSS pagapilion sa tanang mga butang sa titulo nga adunay mga simbolo sa "Caspian", ie. E., Ug "Caspian" ug "Caspian".

Ikaw mahimo usab nga mopili tags nga magsugod uban sa usa ka pipila ka mga kinaiya sa mga hiyas:

[Title ^ = "kinaiya nga imong gusto"] {}

o undang kanila:

[Title $ = "matarung nga kinaiya"] {}.

Bentaha - maximum pagka-flexible. kamo makahimo sa pagpili sa bisan unsa nga kasamtangan nga mga elemento panid nga walay magpabadlong sa mga klase.

Disadvantages - gigamit medyo panagsa ra, lamang sa piho nga mga kaso. Daghan ang web designers gusto sa pamaagi, sukad sa punto nga klase mao ang mas sayon kay sa arrange daghang square brackets ug mga ilhanan "managsama". Dugang pa, kini nga mga selectors dili pagtrabaho sa Internet Explorer bersiyon 7 ug sa ubos. Apan, nga mao karon ang nagkinahanglan sa daan nga Internet Explorer?

mini-klase selectors

Nagtumong sa usa ka mini-status elemento. Pananglitan ,: Hover - unsay mahitabo sa bahin sa panid sa diha nga hover kamo ,: mibisita - ang mibisita link. Kini usab naglakip sa mga elemento sama sa: una-bata ug: sa miaging-bata.

Kini nga matang sa selector aktibo nga gigamit sa modernong Layout, tungod kay ang mga pasalamat ngadto niini nga imong mahimo sa paghimo sa usa ka panid nga "live" sa gawas sa paggamit sa JavaScript. Pananglitan, gusto kamo aron sa pagsiguro nga sa diha nga hover kamo sa button uban sa klase sa btn kolor niini nausab. Sa pagbuhat niini, atong gamiton ang mosunod nga gambalay:

.btn: Hover {

background-kolor: pula nga;

}

Beauty mahimong bungat sa nag-unang mga kabtangan sa button, ang transition kabtangan, alang sa panig-ingnan, 0.5s - sa niini nga kaso, ang button dili pagalibugon dihadiha, ug sa sulod sa katunga sa usa ka ikaduha.

Mga hiyas - ang kaylap nga gigamit alang sa "kapukawan" sa mga panid. Sayon nga gamiton.

Disadvantages - sila dili. Kini mao ang usa ka tinuod nga handy nga himan. Apan, walay kasinatian web designers mahimong mawala sa kadagaya sa mini-klase. Ang problema mao ang masulbad sa pagtuon ug pagbansay.

mini-selectors

"Pseudo" - kini mao ang mga bahin sa pahina nga wala sa HTML, apan sila sa gihapon mahimong madumala. Ikaw wala makasabut? Kini mas sayon kay sa daw. Pananglitan, gusto sa paghimo sa unang sulat sa hilo dako nga ug pula, nga nagbilin sa mga uban nga mga gagmay ug itom nga teksto. Siyempre, kini mahimong nakahinapos nga sulat sa usa ka gitas-on sa usa ka klase, apan kini taas ug makalaay. Kini mao ang mas sayon sa pagpili sa mga bug-os nga parapo ug sa paggamit sa mini :: unang-sulat. Kini naghatag sa kahigayunan sa pagpugong sa dagway sa mga unang sulat.

Adunay na sa usa ka dako nga gidaghanon sa mga mini-elemento. Ilista sila sa usa ka artikulo mao ang dili tingali sa molampos. Ikaw makakaplag sa mga may kalabutan nga impormasyon diha sa imong paborito nga search engine.

Bentaha - sa paghatag sa pagka-flexible sa ipahiangay sa pagtan-aw sa mga panid.

Disadvantages - bag-o ngadto kanila mao ang sagad nga naglibog. Daghang mga pinili sa niini nga matang sa buhat lamang sa pipila ka mga browsers.

sa pag-summarize

Selector - sa usa ka gamhanan nga himan alang sa dagan dokumento sa pagkontrolar. Salamat sa kaniya, kamo makahimo sa pagpili sa tanan nga ka bahin sa panid (adunay bisan lamang partially). Siguroha sa pagkat-on sa tanan nga mga opsyon nga anaa, o bisan isulat sila. Kini mao ang labi na importante kon paghimo kaninyo komplikado nga mga panid uban sa usa ka modernong design ug sa daghang sa interactive nga mga elemento.