30 Selectori css, trebuie să vă amintiți
Să înainte de a trece la selectoare mai avansate CSS, noi novici ar putea depăși cel mai simplu și evident.
HTML5 și CSS3 practica de la zero la rezultatul!
Un asterisc va selecta fiecare element de pagină în parte. Mulți dezvoltatori folosesc această metodă la zero marja și padding. Deși este cu siguranță bun pentru verificări rapide, aș sfătui niciodată să-l folosească într-un cod de producție. El adaugă prea mult în greutate și browser-ul nu este necesar.
Asterisk * poate fi de asemenea utilizat pentru selectoare pentru copii.
El alege fiecare element este un copil al #container div. Din nou, încercați să nu folosească această tehnică prea des, sau nu folosiți.
compatibilitate
Notă # simbol ca prefix selector vă permite să faceți o selecție pe ID-ul. Aceasta este, fără îndoială, cea mai comună utilizare, cu toate acestea, atunci când se utilizează id selectoare cu grijă.
Intreaba-te: Eu absolut trebuie să se lege pentru proba de identitate pentru acest element?
selectori Id greu de rezolvat și nu permit reutilizarea. Dacă este posibil, încercați mai întâi să utilizați numele tag-ul, unul dintre noile elemente HTML5, sau chiar pseudo-clasă.
compatibilitate
Aceasta - clasa de selectare. Diferența dintre id-ul și class'ami că în utilizarea acesteia din urmă, puteți selecta mai multe elemente. Utilizați class'y atunci când doriți să aplicați stiluri la un grup de elemente. Alternativ, utilizați ID-ul pentru a găsi un ac în carul cu fân, și se aplică un stil la un singur element.
compatibilitate
Sfat profesional - Dacă selectorul de dvs. arata ca X Y Z A B.error, faci gresit. Întotdeauna întrebați-vă, este într-adevăr absolut necesar să se utilizeze toate acestea sarcină.
compatibilitate
Ce se întâmplă dacă doriți să selectați toate elementele de pe pagină în funcție de tipul lor, mai degrabă decât în numele sau ID-ul class'a lor? Asigurați-vă mai ușor și de a folosi un selector de tip. Dacă doriți să selectați toate listele neordonate, utilizați ul <>.
compatibilitate
6. X: X a vizitat și: link-
Pentru a selecta toate legăturile tag-ul, care încă mai trebuie să faceți clic, folosim pseudo: link-ul.
Ca o alternativă, avem pseudo-clasa: a vizitat. care este destinat să ne permită să aplice stiluri speciale pentru etichetele numai legături pe pagină, pe care deja a dat clic, sau care au vizitat.
compatibilitate
Această intrare indică selectorul adiacent. Doar va selecta elementul imediat precedat de un element al șablonului. În acest caz, primul paragraf după fiecare element ul va avea text roșu.
compatibilitate
Diferența dintre un obișnuit X Y și X> Y este că acesta din urmă va selecta doar elementele directe ale copiilor. De exemplu, luați în considerare următoarele marcaj.
Selector #container> ul va selecta doar cei care sunt destinate ul'y descendenții direcți ai div cu id-container. El nu a ales, de exemplu, prima li ul descendent.
compatibilitate
Acest combinator frate este de unități identice și X + Y, cu toate acestea, este mai puțin strictă. In timp ce selectorul adiacent (UL + p) selectează doar primul element, care precede imediat elementul șablon, mai frecvente selectorul. În exemplul de mai sus, acesta va alege orice element p atâta timp cât acestea urmează ul.
compatibilitate
10. X [titlu]
Atribuibil atribut selectoare. în exemplul de mai sus, se selectează numai etichetele ancora cu titlul atributului. etichete ancoră pe care nu-l au, nu primesc acel stil special. Dar dacă ai nevoie de o ocazie speciala. Ei bine ...
compatibilitate
11. X [href = "foo"]
compatibilitate
12. X [href * = "nettuts"]
Aici aici vom merge; aici e ceea ce avem nevoie. Un asterisc indică faptul că valoarea actuală ar trebui să apară undeva în valoarea atributului. Astfel acoperit nettuts.com, net.tutsplus.com, și chiar tutsplus.com.
Rețineți că aceasta este o afirmație largă. Ce se va întâmpla atunci când un caracter obligatoriu tag cu unele site-uri se conectează care nu sunt situate pe Envato, cu un Tuts șir în url'e? Dacă doriți să definiți mai precis, utilizați ^ și # 038; pentru a se referi, respectiv, la începutul și sfârșitul liniei.
compatibilitate
13. X [href ^ = "http"]
Acest lucru este ușor de făcut utilizând semnul ^ ( „CT“). Acesta este cel mai frecvent utilizat în expresii regulate pentru a indica începutul liniei. Dacă doriți să selectați toate etichetele cârlige cu href, începând cu http, puteți utiliza un selector similar cu fragmentul de mai sus.
Acum, dacă avem nevoie în schimb, să definească un stil de toate ancore care se leagă de, să zicem, o fotografie? În acest caz, să ne uităm la capătul liniei.
compatibilitate
14. X [href $ = "Jpg"]
Din nou, vom folosi expresii regulate familiare, $, pentru a se referi la capătul liniei. În acest caz, vom găsi toate legăturile care se leagă de imagine - sau, cel puțin, url'b care se termină în .jpg. Amintiți-vă, acest lucru este cel mai probabil, nu funcționează cu GIF-uri, și png.
compatibilitate
15. X [date - * = "foo"]
Întoarceți-vă la numărul opt; cum să se adapteze toate aceste diferite tipuri de imagini: png, jpeg, jpg, gif? Ei bine, am putea crea mai multe selectoare, cum ar fi:
Dar, din moment ce suntem creați-vă o durere de cap și, în plus, este ineficient. O altă soluție - utilizarea de atribute personalizate. Ce se întâmplă atunci când adăugați propriul atribut de date filetype la fiecare legare, legarea la imagini?
Apoi, folosind această operație gata de a primi, este posibil să se utilizeze un selector de atribute standard pentru a selecta numai legăturile dorite.
compatibilitate
Dar caracteristica pe care o puteți surprinde prietenii. Această admitere nu știe prea mulți oameni. Semnul „tilda“ (
) Vă permite să selectați scopul listei de atribute de valori, separate printr-un spațiu.
Conform atributului personalizat de mai sus de la numărul cincisprezece, am putea crea un atribut de date-info, care poate obține o listă separată cu spațiu de tot ce ar trebui să fie marcate. În acest caz, observăm referințele externe și link-uri la imagini - la fel ca un exemplu.
Cu ajutorul gata de utilizare marcare, putem alege acum orice tag-uri la oricare dintre aceste valori, folosind selectorul de atribute tehnica
compatibilitate
17. X: verificat
Această pseudo-clasă selectează dovedit singurul element de interfață utilizator - ca un buton radio sau checkbox central (dreptunghi pentru a marca modul selectat, starea sau acțiunea (pe ecran)). La fel ca ABC.
compatibilitate
HTML5 și CSS3 practica de la zero la rezultatul!
18. X: după
Pseudo înainte și după conectarea tuturor. Se pare metode noi și creative de utilizare a acestora sunt eficiente în fiecare zi. Ele formează pur și simplu conținutul în jurul elementului selectat.
Mulți au fost introduse pentru aceste clase de la prima întâlnire cu hack clar-fix.
Acest hack foloseste: după pseudo-conectare pentru un spațiu după element, și apoi curățați-l. Această recepție magnific ar trebui să aibă în set de instrumente lor, mai ales în cazurile în care este imposibil să se utilizeze metoda overflow: ascuns;.
Conform selectorii CSS3 spec punct de vedere tehnic, trebuie să utilizați pseudo-sintaxa a două coloane. Cu toate acestea, să rămână împreună, agentul utilizator va folosi doar unul și colon.
compatibilitate
19. X: Hover
Oh, haide! Acest lucru știi. Termenul oficial pentru ea: utilizator clasa de acțiune pseudo (acțiuni pseudo-utilizator). Numele este confuz, dar nu este atât de în realitate. Vrei atunci când un utilizator trece peste un element de, aplicați stiluri speciale? El va face treaba!
Amintiți-vă că o versiune mai veche de Internet Explorer nu răspunde la utilizarea: clasa pseudo Hover la altceva decât o etichetă-link.
Cel mai adesea folosim acest selector atunci când sunt aplicate etichete, ancore, de exemplu, de frontieră de jos. atunci când sunt efectuate pe ele cu mouse-ul.
Sfat profesional - border-bottom: negru solid 1px; Se arată mai bine decât text-decoration: subliniază; .
compatibilitate
20. X: (selector)
Pseudo-negare este extrem de utilă. Să presupunem că doriți să selectați toate divuri, cu excepția unuia, care este containerul ID. Un fragment din cele de mai sus se va face perfect treaba.
Sau, dacă am vrut să selectați fiecare element de (nu recomandat), cu excepția alineatului tag-uri, care ar putea fi realizat:
compatibilitate
21. X :: pseudoElement
Puteți utiliza pseudo (atribuit.) Pentru stiluri element de fragmente cu scop, cum ar fi prima linie sau prima literă. Amintiți-vă că pentru a avea un efect, acestea trebuie să fie aplicate elementelor block-level.
Pseudo este format din două coloane :.
Selectați prima literă a unui paragraf
Acest pasaj - selecție, care va găsi toate punctele de pe pagină, și apoi dovyberet doar prima literă a elementului.
Cel mai adesea este folosit pentru a crea „ziar“ stil la primul paragraf al scrisorii.
În mod similar pseudo. prima linie, și are atât stilurile așteptate desemnează doar primul element de linie.
„Pentru compatibilitate cu foi de stil existente, agentii utilizator trebuie să accepte, de asemenea, notația (notația) de colon anterioare la nivelurile 1 și 2 CSS reprezentat pseudo (de exemplu, prima linie de prima literă înainte și: ... după). Această compatibilitate nu este dat un nou în această specificație „reprezentat pseudo - sursa
compatibilitate
22. X: nth-child (n)
Amintiți-vă momentul în care nu am avea posibilitatea de a aloca elemente separate în stivă? Pseudo-nth-copil rezolvă această problemă!
Vă rugăm să rețineți că nth-copil ia un parametru întreg, cu toate acestea, nu pornește de la zero. Dacă doriți să alegeți al doilea element din listă, utilizați li: nth-copil (2).
Este posibil chiar să-l folosească pentru a selecta un set de variabile subsidiare. De exemplu, am putea face li: nth-child (4n) pentru a evidenția fiecare din al patrulea punct de pe listă.
compatibilitate
23. X: nth-ultimul-copil (n)
Ce ai obține dacă ai avea o listă foarte mare de elemente într-un ul, si tu ai avut doar să se aplice, să zicem, al treilea paragraf de la sfârșitul anului? În plus față de li: nth-copil (397), ai putea folosi în schimb o pseudo-nth-ultimul-copil.
Această tehnică funcționează aproape la fel ca și numărul de mai sus șaisprezece ani, cu toate acestea, diferența constă în faptul că se pornește de la capăt și să lucreze împreună în direcția opusă.
compatibilitate
24. X: nth-de tip (n)
Uneori, în loc de a alege un element de copil (copil), va trebui să aleagă în funcție de elementul de tip (de tip).
Imaginați-vă un aspect care conține cinci liste neordonate. Dacă doriți să atribuiți doar o treime stiluri ul'u și nu au avut un cod unic pentru legare, ai putea folosi un pseudo-nth-de-tip (n). Au în jurul lor în porțiunea superioară a cadrului va fi doar al treilea ul.
compatibilitate
25. X: nth-last-of-tip (n)
Da, stau până târziu logic, putem utiliza în continuare nth-ultimul-de-tip pentru a începe cu sfârșitul listei de selectori și pentru a muta în direcția opusă, pentru un eșantion de elementul dorit.
compatibilitate
26. X: primul copil
Această clasă de pseudo structurală ne permite să selectați numai primul copil al părintelui său. O să-l utilizați adesea pentru a elimina cadrele cu elementele primul și ultimul pe listă.
De exemplu, să presupunem că aveți o listă de șiruri, fiecare dintre ele conține border-top și de frontieră de jos. Cu acest aranjament, primul și ultimul punct din acest set va arata un pic ciudat.
Pentru a corecta acest lucru, mulți designeri utilizate clase de prima și ultima. În schimb, puteți utiliza aceste pseudo-clase.
compatibilitate
27. X: ultimul copil
Spre deosebire de primul-copil, ultimul copil selectați ultimul element al elementului părinte.
Să construim un exemplu simplu pentru a demonstra una dintre posibilele modalități de utilizare aceste clase. Creați un element de listă cu stiluri.
Nu este nimic special; doar o simplă listă.
Aceste stiluri de a seta fundal, elimina implicit indentare browser-ul, și se aplică fiecărui cadru li pentru a asigura adâncimea.
Pentru a adăuga la listele lor de adâncime se aplică de frontieră de jos pentru fiecare Li, în umbra sau două mai închisă decât li culoarea de fundal. Apoi se aplică o bordură-top pentru un cuplu de nuante mai deschise.
După cum se vede în imaginea de mai sus, singura problemă este că acest cadru va fi aplicat la partea superioară și inferioară a listei neordonată - se pare ciudat. Să ne rezolva această problemă, utilizați pseudo-clase: primul-copil și: ultimul copil.
Acesta este modul; toate fixe!
compatibilitate
Pseudo-prima-de-tip permite pentru a selecta primul frați (frați) tipul său.
Acum, fără a citi mai departe, încercați să dau seama cum de a selecta doar «Lista Postul 2" . Când ajunge la o decizie (sau predare), continuați să citiți.
Pentru a rezolva acest test poate fi în multe feluri. Vom lua în considerare unele dintre ele. Să începem cu utilizarea de prim-de-tip.
Acest pasaj, de fapt, spune: „Găsiți prima listă neordonată pe pagină, apoi găsiți numai elemente copil directe, care sunt elemente din listă. În continuare, se filtrează fiecare al doilea element din lista stabilită. "
A doua opțiune ar fi de a utiliza semi-selector.
În acest scenariu, vom găsi ul, imediat după tag-ul p, și apoi localizați cel mai recent dintre copiii săi.
le poate face rău sau să se joace cu aceste selectoare după cum doriți.
De data aceasta vom lua prima ul pe pagină, și apoi găsiți primul element din listă, dar începând de la sfârșitul!
compatibilitate
concluzie
Dacă ajustați browsere mai vechi, cum ar fi Internet Explorer 6, ar trebui să fie în continuare atenți atunci când se utilizează noile selectorii. Dar, te rog, nu lăsați te sperii din studiul lor. Tu fă-ți un deserviciu de acest lucru. Simțiți-vă liber pentru a verifica aici pentru o listă de compatibilitate browser-ului. Ca o alternativă, puteți utiliza un script frumos selectoare IE9.js Dean Edward'a pentru a oferi acest sprijin în browsere mai vechi.
Vă mulțumim pentru lecție de lectură pe selectori CSS, sper că am învățat câteva trucuri!
Tradus și editat de: Victor Horn și Andrew Bernatsky. Echipa webformyself.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
