Selectorul de atribute CSS3 Direcționarea tipului de fișier

Acest articol este parte a noastră "Seria Tutoriale HTML5 / CSS3" - dedicat pentru a vă ajuta să vă faceți un designer mai bun și / sau un dezvoltator. Click aici pentru a vedea mai multe articole din aceeași serie.

selectori de atribute este o caracteristică foarte utilă pentru a selecta un element fără a adăuga un lucru inutil id sau clase. Atâta timp cât elementul vizat are un atribut asemănător href, src și tip nu trebuie să facem asta.

Selectorii de atribute au fost de fapt în jur de la CSS 2.1, iar acum cu câțiva alte tipuri de selectori de atribute adăugați în specificațiile CSS3, suntem capabili să vizăm atributul elementului chiar mai specific.

Și, în acest post, vom folosi una din sintaxa pentru a selecta tip fișier care este introdus ca parte a valorii atributului.

Sintaxa și suport pentru browser

tip fișier este întotdeauna la sfârșitul numelui fișierului. Deci, pentru a selecta asta tip fișier putem folosi următoarea sintaxă [Attr $ = "valoare"]. Această sintaxă utilizează $ = operator care va viza sfârșitul valorii atributului, de exemplu:

 a [href $ = ". pdf"]: înainte de background: url ('... /images/document-pdf-text.png') no-repeat;  

Fragmentul de mai sus va selecta fiecare legătură pe care se termină valoarea atributului .pdf și introduceți un cuvânt-pictogramă-document în :inainte de pseudo-element de.

PDF Icon Sursa: Icoane de fugă

În timp ce aceasta este o utilizare comună a acestui selector, cu siguranță putem merge dincolo de asta.

În ceea ce privește compatibilitatea browserului; deși această sintaxă este introdusă oficial ca specificație CSS3, de fapt a fost susținută de atunci Internet Explorer 7, astfel încât să puteți aplica în siguranță prin toate modelele.

Exemplul

Nu vei ști niciodată dacă nu vei încerca. Trebuie doar să încercăm ceva nou pentru a înțelege mai bine ceva ce încă nu înțelegem. Deci, aici vom demonstra modul în care această sintaxă poate fi foarte utilă și utilă pentru a viza un element dintr-o anumită structură HTML care a fost un pic dificil de aplicat folosind doar CSS simplu.

Mai jos, avem unul Structura HTML5 pentru a lista trei imagini cu titlul său. Este doar pentru scop demonstrativ, marcajul dvs. nu trebuie să fie exact ca fragmentul următor (de exemplu, puteți avea doar o singură imagine sau chiar alte trei imagini), dar punctul este să cunoașteți cum se poate aplica această sintaxă o anumită structură HTML.

Fiecare dintre imaginile de mai sus are următoarele formate sau extensii, jpg, png, și gif. Ei au, de asemenea, o legendă care reprezintă extensia imaginii; această subtitrare va acționa apoi ca eticheta de imagine.

Deci, aici este planul, vom oferi diferite culori de fond pentru subtitrarea pentru fiecare extensie de imagine diferită. Imaginea JPG va primi a verde caption color, PNG va primi albastru, și în cele din urmă gif va primi Violet.

Mai întâi, să fixăm poziția etichetei cifrelor relativ, pentru că ne vom aplica absolut poziția pentru subtitrare.

 figura poziție: relativă;  

Adăugați o mică decorare pentru imaginile cu marginile și umbrele.

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Apoi, setăm stilul implicit și poziționarea pentru subtitrare. Imaginea sau eticheta imaginii vor avea o suprafață de 50px.

 img + figcaption culoare: #fff; poziția: absolută; top: 0; dreapta: 0; lățime: 50px; înălțime: 50px; linia-înălțime: 50px; text-align: centru;  

Acum este timpul să adăugați culoarea de fundal. Pentru a face acest lucru, putem combina selectorul de atribute cu selectorul adiacent al fratelui, +.

 img [src $ = ". jpg"] + figcaption culoare-fundal: # a8b700;  

Fragmentul de mai sus va viza fiecare imagine cu atributul sursă care se încheie cu .jpg, atunci selectorul adiacent va găsi elementul de lângă el. În acest caz figcaption va fi adăugat cu # a8b700 culoare de fundal.

Și aici sunt toate codurile pentru restul formatelor de imagine, .png și .gif.

 img [src $ = ".png"] + figcaption culoare-fundal: # 389abe;  img [src $ = ".gif"] + figcaption culoare-fundal: # 8960a7;  

Acum, să vedem cum se arată live din linkul demonstrativ de mai jos, altfel puteți descărca sursa pentru ao examina offline.

• Demo
• Descărcați sursa

Sursele de imagine sunt după cum urmează: MacPro 1, MacPro 2 și MacPro 3

Concluzie

Sperăm că puteți vedea partea elegantă a stilului folosind un selector special, cum ar fi ceea ce am încercat să demonstrăm mai sus folosind selectorul de atribute. Deci, data viitoare când vă stylizați codul HTML, vă recomandăm să faceți o cercetare cu privire la faptul dacă styling-ul dvs. poate fi aplicat utilizând un selector special, mai degrabă decât distrugerea marcajului dvs. structurat corespunzător cu extra clase sau id.

Există de fapt încă doi noi selectori de acest tip pe care îi vom acoperi în posturile următoare, așa că rămâi bine acordat.