CSS3 atribuutide valija Failitüübi sihtimine

See artikkel on osa meie "HTML5 / CSS3 juhendite seeria" - pühendatud selleks, et aidata teil paremini disainer ja / või arendaja. Kliki siia et näha sama seeria rohkem artikleid.

The atribuutide valikud on tõesti kasulik element elemendi valimiseks ilma üleliigne lisamata id või klassid. Niikaua kui sihitud elemendil on selline omadus nagu href, src ja tüüp me ei pea seda tegema.

Atribuutide valijad on tegelikult olnud ümber alates CSS 2.1, ja nüüd, kui CSS3 spetsifikatsioonidele on lisatud veel mõned tüüpi atribuutide valijad, saame elemendi atribuuti veelgi täpsemalt suunata.

Ja selles postituses kasutame valimiseks ühte süntaksit faili tüüp see lisatakse atribuudi väärtuse osana.

Süntaksi ja brauseri tugi

The faili tüüp on alati faili nime lõpus. Nii et seda valida faili tüüp saame kasutada järgmist süntaksit [attr $ = "väärtus"]. See süntaks kasutab $ = atribuutide väärtuse lõppu, näiteks:

 a [href $ = ". pdf"]: enne taust: url ('… /images/document-pdf-text.png') ei korrata;  

Ülaltoodud väljavõte valib iga lingi, mille atribuudi väärtus lõpeb .pdf ja sisestage sõna-dokumendi ikoon : enne pseudoelement.

PDF ikooni allikas: Fuuga ikoonid

Kuigi see on selle valija ühine kasutamine, võime kindlasti sellest kaugemale minna.

Brauseri ühilduvuse osas; kuigi seda süntaksit tutvustatakse ametlikult CSS3 spetsifikatsioonina, on seda juba toetatud Internet Explorer 7, et saaksite seda oma disainilahenduste kaudu turvaliselt rakendada.

Näide

Sa ei tea kunagi, kui sa kunagi ei püüa. Peame lihtsalt proovima midagi uut, et saada parem arusaam sellest, mida me veel ei mõista. Seega näitame siin, kuidas see süntaks võib olla väga kasulik ja mugav, et sihtida teatud HTML-struktuuri elementi, mida oli varem olnud lihtne kasutada ainult lihtsa CSS-i abil.

Allpool on meil HTML5 struktuur kolm kujutist koos selle pealdisega. See on ainult demonstratsiooniks, kuid teie märgistus ei pea olema täpselt selline, nagu järgmine väljavõte (nt teil võib olla ainult üks pilt või isegi veel kolm pilti), kuid asi on teil teada saada, kuidas seda süntaksit saab rakendada konkreetse HTML-i struktuuri.

Kõigil ülaltoodud piltidel on järgmised formaadid või laiendused, jpg, png, ja gif. Neil on ka pealkiri, mis esindab selle kujutise laiendust; see pealkiri toimib seejärel pildi siltina.

Niisiis, siin on plaan, anname iga erineva pildilaiendi pealdise jaoks erinevad taustavärvid. JPG-kujutis saab a roheline pealdise värv, PNG saab sinine, ja lõpuks saab gif lilla.

Kõigepealt seadistagem figuurimärgi positsiooni suhteliselt, sest me rakendame absoluutne pealdise asukoht.

 joonis positsioon: sugulane;  

Lisage väikeste kaunistustega piirid ja varjud.

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

Ja siis me seadistame pealdise vaikimisi stiili ja positsioneerimise. Pildi pealdis või sildil on 50tk ruut.

 img + figcaption värv: #fff; positsioon: absoluutne; top: 0; paremale: 0; laius: 50 px; kõrgus: 50 px; rea kõrgus: 50 px; teksti joondamine: keskus;  

Nüüd on aeg lisada taustavärv. Selleks saame kombineerida atribuudi valija külgneva venna valijaga, +.

 img [src $ = ". jpg"] + figcaption taustavärv: # a8b700;  

Ülalolev fragment puudutab iga pilti, mille allikas atribuut lõpeb .jpg, siis asub kõrval asuv valija selle kõrvale jääva elemendi. Sel juhul on joonistamine lisatakse # a8b700 taustavärv.

Ja siin on kõik ülejäänud pildivormingute koodid .png ja .gif.

 img [src $ = ". png"] + figcaption taustavärv: # 389abe;  img [src $ = ". gif"] + figcaption taustavärv: # 8960a7;  

Vaatame nüüd, kuidas allpool olevast demo-lingist selgub, kuidas see elab või muidu saate allika alla laadida, et seda võrguühenduseta uurida.

• Demo
• Allalaadimise allikas

Pildiallikad on järgmised: MacPro 1, MacPro 2 ja MacPro 3

Järeldus

Loodame, et stiilide elegantne pool näeb spetsiaalset valijat, nagu seda, mida me oleme proovinud ülalpool atribuutide valijat kasutades näidata. Niisiis soovitame järgmisel korral, kui kujundate oma HTML-i, soovitame teil teha mõningaid uuringuid selle kohta, kas teie stiil on rakendatav mõne spetsiaalse valija abil, selle asemel, et hävitada oma nõuetekohaselt struktureeritud märgistus ekstra klassid või id.

Tegelikult on veel kaks uut sellist tüüpi valijat, mis katame järgmistes postitustes, nii et olge kursis.