Selectori CSS. Tipuri de selectori

Limba pentru descrierea aspectului documentului CSS evoluează în mod constant. În timp, nu numai puterea și funcționalitatea acesteia cresc, dar și flexibilitatea și ușurința în utilizare.

Selectori CSS

Să începem să înțelegem. Deschideți orice tutorial CSS, cel puțin o secțiune din acesta se va concentra pe tipurile de selectori. Acest lucru nu este surprinzător, deoarece acestea reprezintă una dintre cele mai convenabile modalități de gestionare a conținutului paginii. Cu ajutorul acestora puteți interacționa cu absolut orice elemente HTML. Acum există 7 tipuri de selectori:

• pentru tag-
• pentru clase;
• pentru ID;
• universală;
• atribute;
• pentru interacțiunea cu pseudo-clase;
• pentru a controla pseudo-elementele.

Sintaxa este simplă. Pentru a afla cum să utilizați Selectorii CSS, citiți doar despre ele. Care opțiune este mai bine să alegeți să controlați conținutul în cazul dvs.? Să încercăm să înțelegem.

Selectori de etichete

Aceasta este cea mai simplă opțiune, care nu necesită cunoștințe speciale pentru scriere. Pentru a gestiona etichetele, trebuie să le utilizați numele. Să presupunem că "capacul" site-ului dvs. este înfășurat într-o etichetă

Avantaje - ușurință în utilizare, versatilitate.

Dezavantaje - o lipsă totală de flexibilitate. În exemplul de mai sus, toate etichetele antetului vor fi selectate simultan. Și dacă ar trebui să gestionați doar una?

Selectori de clasă

Cea mai comună opțiune. Acesta este destinat pentru gestionarea etichetelor cu clasa de atribute. Să presupunem că codul dvs. are trei blocuri

Sintaxa este următoarea: specificați punctul ("."), După care scrieți numele clasei. Pentru a gestiona primul bloc, utilizați designul .red. Al doilea este albastru și așa mai departe.

Important! Se recomandă să utilizați valori clare pentru atributul de clasă. Se consideră forma rea ​​de a utiliza transliterația (de exemplu, krasiviy-Blok) sau combinații aleatoare de litere / cifre (ojfh834871). În acest cod, sunteți obligat pentru a obține confuz, să nu mai vorbim de dificultățile cu care se va confrunta pe cei care vor fi implicați în proiect după tine. Cea mai bună opțiune este utilizarea unei metodologii, cum ar fi BEM.

Avantajele sunt destul de mari de flexibilitate.

Dezavantaje - mai multe elemente pot avea aceeași clasă și, prin urmare, vor fi editate simultan. Problema este rezolvată folosind metodologia, precum și moștenirea preprocesorilor. Asigurați-vă că ați stăpânit mai puțin, sass sau un alt preprocesor, acestea vor simplifica foarte mult munca.

Selector prin ID

Despre această opțiune, opiniile coderului și ale programatorilor sunt ambigue. Unele tutoriale CSS în general, nu vă recomandăm să utilizați ID-ul, deoarece pot provoca probleme de moștenire atunci când sunt folosite neintenționat. Cu toate acestea, mulți specialiști le distribuie în mod activ pe parcursul marcării. Depinde de tine. Sintaxa este: un caracter lattice ("#"), Apoi numele blocului. De exemplu, #red.

ID-ul diferă de clasă prin mai mulți parametri. În primul rând, pe pagină nu pot exista două pagini identice ID-ul. Acestea sunt atribuite nume unice. În al doilea rând, un astfel de selector are o prioritate mai mare. Aceasta înseamnă că dacă dai blocul o clasă roșu și specificați în tabele CSS roșu culoarea de fundal, și apoi îl numiți id albastru și indică culoarea albastră, blocul va deveni albastru.

Avantaje - puteți controla un element specific, fără a acorda atenție stilurilor pentru etichete și clase.

Dezavantaje - este ușor de confundat într-un număr mare ID-ul și clasă.

Important! Dacă utilizați metodologia BEM (sau analogii acesteia), ID-ul voi, în general, nu aveți nevoie. Această tehnică a aspectului implică utilizarea unor clase unice, care este mult mai convenabilă.

Selector universal

Sintaxă: semnul stelară ("*") și brațele curbate, adică *{}.

Se utilizează pentru a atribui simultan anumite atribute tuturor elementelor paginii. Când poate veni la îndemână? De exemplu, dacă doriți să setați o proprietate a paginii box-size: caseta de frontieră. Acesta poate fi folosit nu numai pentru a gestiona toate componentele unui document, ci și pentru a controla toți copiii unui anumit bloc, de exemplu, div * {}.

Avantaje - puteți gestiona simultan un număr mare de articole.

Dezavantajele nu reprezintă o opțiune flexibilă. În plus, utilizarea acestui selector în unele cazuri încetinește pagina.

Prin atribute

Este posibil să controlați un element cu un atribut specific. De exemplu, aveți mai multe etichete de intrare cu un atribut de tip diferit. Unul dintre ele este text, al doilea este parola, al treilea este numărul. Desigur, puteți atribui fiecare clasă sau cod, dar nu este întotdeauna convenabil. Selectorii CSS prin atribute fac posibilă specificarea valorilor pentru anumite etichete cu precizie maximă. De exemplu, astfel:

introduceți [type = rsquo-textrsquo -] {}

Acest selector de atribute va selecta toate intrările cu tipul de text.

Instrumentul este destul de flexibil, poate fi folosit cu orice etichete care pot avea atribute. Dar asta nu e tot! În caietul de sarcini CSS, este posibilă gestionarea elementelor chiar și cu mare comoditate!

Imaginați-vă că pagina dvs. are o intrare cu substituentul placeholder = "Introduceți numele" și introduceți placeholder = "Introduceți parola". Ele pot fi de asemenea selectate folosind selectorul! Urmatoarea constructie este folosita pentru aceasta:

introduceți [placeholder = "Introduceți numele"] {} sau introduceți [placeholder = "Introduceți parola"]

Este posibilă o muncă mai flexibilă cu atribute. Să presupunem că aveți un număr de etichete cu atribute similare din titlu (de exemplu, „Caspian“ si „Caspian“). Pentru a selecta ambele, utilizați următorii selectori:

[titlu * = "kaspiysk"]

CSS va selecta toate elementele din titlu ale căror simboluri sunt "caspice", adică ambele "Caspian" și "Caspian".

De asemenea, puteți selecta etichete ale căror atribute încep cu anumite caractere:

[title ^ = "caracterul de care ai nevoie"] {}

sau se termina cu ei:

[title $ = "caracterul dorit"] {}.

Avantaje - flexibilitate maximă. Aveți posibilitatea să selectați elementele existente ale paginii fără a fi afectate de clase.

Dezavantaje - se utilizează relativ rar, numai în cazuri specifice. Mulți designeri de layout preferă metodologia, deoarece este mai ușor să specificați o clasă decât să aranjați mai multe paranteze pătrate iar semnele sunt "egale". În plus, acești selectori nu funcționează în Internet Explorer versiunea 7 sau mai mică. Cu toate acestea, cine are nevoie acum de vechiul Internet Explorer?

Selectori de pseudo-clasă

O pseudo-clasă indică starea unui element. De exemplu: hover - ce se întâmplă cu o porțiune a paginii când treceți peste: link-ul vizitat-vizitat. Acestea includ elemente precum: primul copil și: ultimul copil.

Acest tip de selectori este folosit în mod activ în aspectul modern, deoarece datorită acestuia puteți face pagina "live" fără a utiliza jаvascript. De exemplu, doriți să faceți ca atunci când plasați cursorul peste un buton cu clasa btn, culoarea sa se schimbă. Pentru aceasta, utilizăm următoarea construcție:

.btn: hover {

fundal-culoare: roșu-

}

Frumusetea poate fi specificată în proprietățile de bază ale butonului, proprietatea de tranziție, de exemplu, 0,5s - în acest caz, butonul nu va roșească instantaneu, iar în termen de o jumătate de secundă.

Avantaje - utilizate în mod activ pentru a "revigora" paginile. Ușor de utilizat.

Dezavantaje - nu sunt. Acesta este într-adevăr un instrument convenabil. Cu toate acestea, editorii neexperimentați pot deveni confuzi în abundența pseudo-claselor. Problema este rezolvată prin studiu și practică.

Selectori pseudo-elemente

"Pseudo-elementele" sunt acele părți ale paginii care nu sunt în HTML, dar ele pot fi în continuare gestionate. Nu ați înțeles nimic? Totul este mai simplu decât pare. De exemplu, doriți să faceți prima literă în linie mare și roșie, lăsând celălalt text mic și negru. Desigur, puteți să înscrieți această literă cu o anumită clasă, dar este lungă și plictisitoare. Este mult mai ușor să selectați întregul paragraf și să utilizați pseudo-elementul :: prima literă. Vă permite să controlați apariția primei litere.

Există un număr destul de mare de pseudo-elemente. A le lista în cadrul unui articol este puțin probabil să funcționeze. Puteți găsi informații relevante în motorul dvs. de căutare preferat.

Avantaje - face posibilă reglarea flexibilă a aspectului paginii.

Dezavantaje - începătorii din ele sunt deseori confuzi. Mulți selectori de acest tip funcționează numai în anumite browsere.

Să rezumăm

Selectorul este un instrument puternic pentru controlul fluxului documentelor. Datorită lui, poți selecta absolut fiecare componentă a paginii (chiar și cea existentă este doar condiționată). Asigurați-vă că ați învățat toate opțiunile disponibile sau cel puțin le-ați notat. Acest lucru este deosebit de important dacă creați pagini complexe cu un design modern și o mulțime de elemente interactive.