Izbirnik atributov CSS3 Ciljanje na vrsto datoteke

Ta članek je del našega "Serija vadnic HTML5 / CSS3" - namenjen vam je za boljšega oblikovalca in / ali razvijalca. Klikni tukaj da si ogledate več člankov iz iste serije.

The selektorji atributov je zelo uporabna funkcija za izbiro elementa brez dodajanja odvečnih id ali razredi. Dokler je ciljni element podoben atributu href, src in vrsto tega nam ni treba storiti.

Selektorji atributov so dejansko prisotni od CSS 2.1, in zdaj, ko je v specifikacijah CSS3 dodanih še nekaj tipov selektorjev atributov, lahko atribut elementa še bolj ciljno usmerimo.

In v tem prispevku bomo uporabili eno od skladenj za izbiro vrsta datoteke ki je vstavljena kot del vrednosti atributa.

Sintaksa in podpora za brskalnik

The vrsta datoteke je vedno na koncu imena datoteke. Torej, da izberete to vrsta datoteke uporabimo lahko naslednjo skladnjo [attr $ = "value"]. Ta skladnja uporablja $ = operaterja, ki bo ciljal konec vrednosti atributa, na primer:

 a [href $ = ". pdf"]: pred ozadje: url ('… /images/document-pdf-text.png') se ne ponavlja;  

Zgornji odrezek bo izbral vsako povezavo, s katero se konča vrednost atributa .pdf in vstavite ikono za besedilni dokument v : prej psevdoelement.

Vir PDF ikone: Ikone fuge

Čeprav je to skupna uporaba tega selektorja, zagotovo lahko presegamo to.

Glede združljivosti brskalnika; čeprav je ta sintaksa uradno uvedena kot specifikacija CSS3, je bila dejansko podprta Internet Explorer 7, tako da ga lahko varno uporabite skozi vse vaše modele.

Primer

Nikoli ne boš izvedela, če ne boš nikoli poskusila. Samo poskusiti moramo nekaj novega, da bomo bolje razumeli nekaj, česar še ne razumemo. Tukaj bomo prikazali, kako je lahko ta sintaksa zelo koristna in priročna za ciljanje elementa v določeni strukturi HTML, ki je bila nekoč težko uporabiti z uporabo samo navadnega CSS-ja..

Spodaj imamo Struktura HTML5 za prikaz treh slik z napisom. To je samo za predstavitveni namen, vaša oznaka ni nujno enaka naslednjemu odlomku (npr. Lahko imate samo eno sliko ali celo tri slike), vendar je bistvo, da spoznate, kako se ta sintaksa lahko uporabi v določeno strukturo HTML.

Vsaka od zgoraj navedenih slik ima naslednje oblike ali razširitve, jpg, png, in gif. Imajo tudi napis, ki predstavlja njegovo podaljšanje slike; ta napis bo nato deloval kot oznaka slike.

Torej, tukaj je načrt, mi bomo dali različne barve ozadja za napis za vsako različno podaljšanje slike. Slika JPG bo dobila a zelena barve napisov bo dobil PNG modra, in končno bo gif dobil vijolična.

Najprej postavimo položaj oznake številke relativno, ker bomo uporabili absolutno za naslov.

 slika položaj: relativna;  

Dodajte malo dekoracijo za slike z mejami in sencami.

 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);  

In potem nastavimo privzeti slog in položaj za napis. Nalepka ali oznaka slike bo imela kvadrat 50px.

 img + figcaption barva: #fff; položaj: absolutno; na vrh: 0; desno: 0; širina: 50px; višina: 50px; višina vrstice: 50px; text-align: center;  

Zdaj je čas, da dodate barvo ozadja. V ta namen lahko kombiniramo atribut selektor s sosednjim selektorjem, +.

 img [src $ = ". jpg"] + figcaption ozadna barva: # a8b700;  

Zgornji odrezek bo usmerjen na vsako sliko z atributom vira, ki se konča z .jpg, potem bo sosednji izbirnik našel element poleg njega. V tem primeru figcaption bo dodan s # a8b700 Barva ozadja.

In tukaj so vse kode za ostale formate slik, .png in .gif.

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

Zdaj pa poglejmo, kako se izkaže v živo na spodnji demo povezavi, sicer lahko prenesete vir, da ga pregledate brez povezave.

• Demo
• Prenesi vir

Viri slik so naslednji: MacPro 1, MacPro 2 in MacPro 3

Zaključek

Upamo, da boste s posebno izbiro videli elegantno ploskev stylinga, kot je tisto, kar smo poskušali prikazati s pomočjo izbirnika atributov. Torej, naslednjič, ko boste oblikovali HTML, vam priporočamo, da izvedete nekaj raziskav o tem, ali je vaš stil mogoče uporabiti s posebnim izbirnikom, namesto da bi uničili pravilno strukturirano oznako z dodatnim razredi ali id.

Obstajata še dva nova tovrstna selektorja, ki jih bova obravnavala v naslednjih postajah, zato ostanite z nami.