1. Selector universal *
Să începem cu selectori simpli înainte de a trece la selectori avansați.
Un selector universal (un simbol al stelelor) este destinat fiecărui element din pagină. Mulți dezvoltatori folosesc acest truc pentru a reseta umplutura și marja. Deși acest lucru, bineînțeles, este bine pentru teste rapide, recomand să nu folosiți acest selector în codul dvs. Acest lucru adaugă prea multă greutate la browser, ceea ce este inutil.
O stea poate fi folosită ca descendent.
Acest stil va fi atribuit fiecărui element al descendentului #container.
2. Selectorii #X sau ID
Simbolul grill din fața selectorului ne permite să atribuim un id (identificator). Spre deosebire de clase, identificatorul poate fi folosit o singură dată pe pagină; deci folosiți selectorii de clasă pentru elementele repetate. De asemenea, rețineți că selectorii de date au o prioritate mai mare decât selectorii de clasă.
3. Selectorii X sau Class
Acesta este un selector de clasă. Toți selectorii de clasă încep cu o perioadă. Selectorii de clasă pot fi utilizați independent de etichete. După cum am menționat deja, folosiți selectorii de clasă pentru elementele repetate.
4. X Y sau selectorul pentru copii
În fața voastră selectorul este descendent. Când trebuie să schimbați un element care se află în interiorul altor elemente, utilizați selectorii copiilor. De exemplu, dacă trebuie să atribuiți un stil unui a. care se află în listă? Cu siguranță, pentru aceste scopuri este mai bine să folosiți selectorii descendenților.
5. X sau selector de tip
Ce se întâmplă dacă trebuie să atribuiți un stil unui element în funcție de tipul său, mai degrabă decât de clasă sau id. Este simplu - folosiți selectorul de tip. Dacă aveți nevoie de toate listele neordonate ale paginii, aplicați ul <> .
6. Pseudo-clase X: vizitate și X: link
Pseudo-clasa: link-ul denotă toate link-urile prin care utilizatorul nu a schimbat încă.
Pseudo-clasa: vizitat. dimpotrivă, denotă acele linkuri prin care utilizatorul a făcut deja clic
7. X + Y sau selectorul elementelor de îngrijire medicală
Alegători adiacenți (sau soră). Indică un element care se află direct în spatele celuilalt element. Aceste elemente trebuie să aibă același părinte și să fie la același nivel. În cazul nostru, numai primul paragraf, după fiecare listă neordonată (ul), va avea o culoare roșie.
8. X> Y sau selectorul pentru copii
Diferența dintre construcția lui X Y și X> Y este că acesta din urmă desemnează numai elementul copil. Pentru un exemplu, analizați următoarea marcare.
Selectorul #container> ul denumește numai ul. care este copilul containerului cu container id =. Și nu afectează, în acest caz, elementul ul. care este elementul copil al etichetei li.
Acesta este un selector asociat, este similar cu X + Y. cu toate acestea, este mai puțin strictă. În timp ce selectorul adiacent (ul + p) selectează numai primul element în spatele selectorului anterior, acest selector este mai general. Acest selector va selecta, vezi exemplul, toate elementele p din spatele ul.
Selector de atribute
10. X [titlu]
Așa-numitul selector de atribute, pentru exemplul nostru - vedeți mai sus, va selecta numai eticheta de ancorare care are atributul titlu. Dar dacă aveți nevoie de mai multe detalii?
11. X [href = "foo"]
12. X [href * = "dnzl"]
Ce avem nevoie. Aici, folosind asteriscul, selectăm toate etichetele a. atributul href al cărui cuvânt este dnzl. Acest lucru și dnzl.ru. și dnzl.ru/view_post.php, etc.
Dar dacă vrem să setăm stilul pentru toate etichetele de ancorare care ne trimit la fotografie?
14. X [href $ = ".jpg"]
15. X [date - * = "foo"]
Dar încă. Cum descriem selectorul care afectează toate formatele de imagine? Putem crea un selector de grup, de exemplu:
Dar acest lucru nu este recomandabil. O altă posibilă soluție este folosirea unui atribut normal. Dacă adăugăm propriul atribut de date-fișier la fiecare a. care se referă la imagine?
Apoi putem folosi selectorul de atribute pentru a indica toate link-urile necesare.
Nu mulți oameni știu despre acest truc. Simbolul Tilde
ne permite să selectăm un atribut care are o listă de valori separate de spațiu.
De exemplu, la fel ca la pasul 15, putem crea atributul info-info. care trebuie să stabilească o gamă de valori printr-un spațiu. În acest caz, pentru a selecta toate legăturile externe și link-urile către imagini, ar trebui să faceți acest lucru:
Pseudo-clase și pseudo-elemente
17. X: verificat
Această pseudo-clasă va selecta toate elementele interfeței de utilizator (cum ar fi un switch sau casetă de selectare) care sunt marcate cu atributul verificat.
18. X: după
Selectori pseudo-elemente: înainte și după adăugarea conținutului generat înaintea elementului și, după caz, după element. Mulți au învățat despre aceste clase atunci când au întâmpinat un hack clar.
Selectorul pseudo-element: după adăugarea unui spațiu după element și împiedică ambalarea acestuia.
19. X: hover
Pseudo-clasa: hover vă permite să modificați aspectul link-ului la care utilizatorul mișca mouse-ul.
Puteți adăuga, de exemplu, limita inferioară când utilizatorul deplasează mouse-ul peste link.
20. X: nu (selector)
Pseudo-clasa de negare este deosebit de utilă. Să spunem că vreau să selectez toate blocurile Div. cu excepția celui al cărui id este egal cu containerul. Codul de mai sus se ocupă de acest lucru.
Sau, dacă vreau să selectez toate elementele cu excepția paragrafului, atunci:
21. X :: pseudoElement
Putem folosi pseudo-elemente pentru a formata un anumit fragment dintr-un element, de exemplu, prima linie (:: prima linie) sau prima (: prima litera). Aceste pseudo-elemente ar trebui aplicate doar elementelor de blocare.
22. X: n-copil (n)
Rezultatul pentru diferite valori de pseudo-clasă: n-copil
n este contorul. care ia automat valoarea 0. 1. 2.
Amintiți-vă zilele în care nu ați putut selecta un element din stivă? N-copilul pseudo-clasic rezolvă această problemă.
Rețineți că n-copil ia un număr ca valoare, dar acest număr nu pornește de la zero. Dacă doriți să selectați al doilea element al listei, aplicați li: nth-child (2). Pentru a selecta fiecare al patrulea element din listă, utilizați următoarea construcție: li: nth-child (4n).
23. X: n-ultimul copil (n)
Ce se întâmplă dacă aveți o listă mare și trebuie să selectați cel de-al treilea element de la final? În loc de a construi li-nth-child (397). puteți folosi pseudo-clasa nth-last-child. Numărarea este de la sfârșit.
24. X: n-a-tip (n)
Vor veni momente când, în loc de un element copil, trebuie să selectați un element de tip.
Imaginați-vă un aspect care conține cinci liste neordonate. Dacă doriți să alegeți numai a treia ul. și nu au un id unic. puteți aplica pseudo-clasa nth-of-type (n). În codul de mai sus numai a treia ul are o limită.
25. X: n-ultimul tip (n)
De asemenea, putem folosi n-ul-de-tip pentru a începe numărarea de la sfârșitul listei.
26. X: primul copil
Numai primul copil al părintelui poate fi eliberat. Un lucru foarte util, mai ales pentru ștergerea frontierelor la primul și ultimul element al listei.
De exemplu, aveți o listă de șiruri de caractere, fiecare având o frontieră de sus și o margine de fund. Aici primul și ultimul articol va arăta cam ciudat.
Puteți utiliza aceste pseudo-clase pentru a reseta marginea.
27. X: ultimul copil
Acest selector indică ultimul copil al etichetei părinte.
De exemplu, avem o listă neordonată.
Acest stil va seta fundalul, va elimina umplutura din eticheta ul. și să atribui limitele tagurilor li (ceea ce va da o anumită adâncime).
O problemă de limită pentru eticheta inferioară și superioară li pare ridicolă. Pentru a repara acest lucru este suficient să aplicați pseudo-clase: primul-copil și: ultimul-copil.
28. X: numai copil
Pseudo-clasa cu un singur copil vă permite să selectați numai un copil din eticheta părinte. De exemplu, în ceea ce privește marcarea în partea de sus, doar o singură secțiune a elementului div va deveni roșie.
Aruncați o privire la marcaj:
În acest caz, paragrafele din al doilea element div nu vor fi selectate; doar primul.
29. X: numai de tip
Singura pseudo-clasă de tip va selecta elemente care nu au elemente surori în containerul părinte. De exemplu, hai să selectăm toate ul. care au un element de listă.
30. X: primul de tip
Prima clasă de pseudo-tip vă permite să selectați primele elemente surise de tipul dvs.
Trimiteți-le prietenilor: