Selektor atribútov CSS3 zacieľujúci na typ súboru

Tento článok je súčasťou nášho "HTML5 / CSS3 Tutoriály séria" - ktorá vám pomôže urobiť z vás lepšieho dizajnéra a / alebo vývojára. Kliknite tu zobraziť ďalšie články z rovnakej série.

selektory atribútov je skutočne užitočná funkcia na výber prvku bez pridania nadbytočného id alebo vyučovanie. Pokiaľ má cieľový element atribút, ako je href, src a typ nemusíme to robiť.

Voľba atribútov bola skutočne okolo od CSS 2.1, a teraz s niekoľkými ďalšími typmi selektorov atribútov pridaných do špecifikácií CSS3 sme schopní zacieliť atribút prvku ešte konkrétnejšie.

A v tomto príspevku použijeme jednu zo syntaxe na výber typ súboru ktorý je vložený ako súčasť hodnoty atribútu.

Syntax a podpora prehliadača

typ súboru je vždy na konci názvu súboru. Takže, aby ste to vybrali typ súboru môžeme použiť nasledujúcu syntax [Atr $ = "hodnota"]. Táto syntax používa $ = operátor, ktorý sa zameria na koniec hodnoty atribútu, napríklad:

 a [href $ = ". pdf"]: skôr ako background: url ('... /images/document-pdf-text.png') no-repeat;  

Vo vyššie uvedenom úryvku vyberiete každý odkaz, na ktorý sa hodnota atribútu skončí .pdf a vložte ikonu slovníka dokumentu do priečinka : before pseudo-prvok.

Zdroj ikon PDF: Fugue Icons

Aj keď je to spoločné využitie tohto voliča, určite to môžeme prekročiť.

Čo sa týka kompatibility prehliadača; napriek tomu, že táto syntax je oficiálne zavedená ako špecifikácia CSS3, bola odvtedy podporovaná Internet Explorer 7, takže ho môžete bezpečne aplikovať cez všetky vaše návrhy.

Príklad

Nikdy to nezistíš pokiaľ to neskúsiš. Musíme skúsiť niečo nové, aby sme lepšie pochopili niečo, čo ešte nerozumieme. Takže tu budeme demonštrovať, ako môže byť táto syntax veľmi užitočná a vhodná na zacielenie na prvok v konkrétnej štruktúre HTML, ktorý bol trochu ťažko aplikovateľný iba pomocou jednoduchého CSS.

Nižšie, máme Štruktúra HTML5 na zobrazenie troch obrázkov s titulkom. Len na demonštračné účely, značka nemusí byť presne taká, ako je nasledujúci úryvok (napr. Môžete mať len jeden obrázok alebo dokonca tri ďalšie obrázky), avšak ide o to, aby ste vedeli, ako možno túto syntax aplikovať konkrétnu štruktúru HTML.

Každý z vyššie uvedených obrázkov má nasledujúce formáty alebo rozšírenia, jpg, png, a gif. Majú tiež titulok, ktorý predstavuje jeho rozšírenie obrazu; tento popis bude slúžiť ako obrazový štítok.

Takže, tu je plán, budeme dať rôzne farby pozadia pre titulok pre každé iné rozšírenie obrazu. Obrázok JPG dostane a zelená farba titulkov, PNG dostane Modrá, a nakoniec gif dostane Fialová.

Po prvé, nastavíme pozíciu značky číselne relatívne, pretože ideme použiť absolútny pozície pre titulok.

 obrázok pozícia: relatívna;  

Pridajte trochu dekorácie pre obrázky s okrajmi a tieňmi.

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

Potom nastavíme predvolený štýl a umiestnenie pre titulok. Obrazový obrázok alebo štítok bude mať štvorcový rozmer 50 px.

 img + figcaption farba: #fff; poloha: absolútna; top: 0; doprava: 0; šírka: 50px; výška: 50px; line-height: 50px; text-align: center;  

Teraz je čas pridať farbu pozadia. K tomu môžeme kombinovať volič atribútov s priľahlým selektorom súrodenca, +.

 img [src $ = ". jpg"] + figcaption farba pozadia: # a8b700;  

Fragment uvedený vyššie bude zacieliť na každý obrázok s atribútom zdroja končiacim .jpg, potom priľahlý selektor nájde prvok vedľa neho. V tomto prípade figcaption bude pridaný s # a8b700 farba pozadia.

A tu sú všetky kódy pre ostatné formáty obrázkov, .png a .gif.

 img [src $ = ". png"] + figcaption farba pozadia: # 389abe;  img [src $ = ". gif"] + figcaption farba pozadia: # 8960a7;  

Teraz uvidíme, ako sa ukáže ako live z nižšie uvedeného demo odkazu, inak môžete prevziať zdroj a preskúšať ho offline.

• demonštrácie
• Stiahnuť zdroj

Zdroje obrázkov sú nasledovné: MacPro 1, MacPro 2 a MacPro 3

záver

Dúfame, že elegantnú stránku štýlu môžete vidieť pomocou špeciálneho výberu, ako to, čo sme sa snažili demonštrovať vyššie pomocou výberu atribútov. Takže pri ďalšom formovaní vášho HTML vám veľmi odporúčame, aby ste urobili nejaký prieskum o tom, či váš styl môže byť použitý pomocou nejakého špeciálneho výberu, namiesto toho, aby ste zničili správne štruktúrovanú značku s extra vyučovanie alebo id.

Existujú vlastne dva nové výbery tohto typu, ktoré budeme pokryť v ďalších príspevkoch, takže zostaňte naladení.