CSS3 atributo parinkiklis, nukreiptas į failo tipą

Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

The atributų atrankos yra tikrai naudinga funkcija pasirinkti elementą, nereikalaujant nereikalingo ID arba klasės. Kol tikslinis elementas turi tokį atributą kaip href, src ir tipas mes neturime to daryti.

Atributų parinktys iš tikrųjų buvo aplink nuo CSS 2.1, ir dabar su keliais papildomais atributų atrankos tipais, pridedamais prie CSS3 specifikacijų, galime tiksliau nukreipti elemento atributą.

Ir šiame pranešime ketiname pasirinkti vieną iš sintaksės, kad pasirinktume Failo tipas kuri įtraukiama kaip atributo vertės dalis.

Sintaksė ir naršyklės palaikymas

The Failo tipas visada yra failo pavadinimo pabaigoje. Taigi, pasirinkite Failo tipas mes galime naudoti šią sintaksę [attr $ = "vertė"]. Ši sintaksė naudoja $ = operatorius, kuris taikys atributo vertės pabaigą, pavyzdžiui:

 a [href $ = ". pdf"]: prieš background: url ('… /images/document-pdf-text.png') ne kartoti;  

Pirmiau pateiktoje fragmente bus pasirinkta kiekviena nuoroda, kurią atributo vertė baigiasi .pdf ir įterpkite „Word“ dokumento piktogramą : anksčiau pseudo elementas.

PDF piktogramos šaltinis: Fuga simboliai

Nors tai yra bendras šio selektoriaus panaudojimas, mes tikrai galime tai padaryti.

Dėl naršyklės suderinamumo; nors ši sintaksė yra oficialiai įvesta kaip CSS3 specifikacija, ji iš tikrųjų buvo palaikoma nuo „Internet Explorer 7“, todėl galite saugiai ją pritaikyti per visus savo dizainus.

Pavyzdys

Jūs niekada nežinote, jei niekada nebandysite. Mes turime tiesiog išbandyti kažką naujo, kad geriau suprastume ką nors, ko dar nesuprantame. Taigi čia parodysime, kaip ši sintaksė gali būti labai naudinga ir patogi, jei norite nukreipti į tam tikros HTML struktūros elementą, kuris anksčiau buvo šiek tiek sudėtingas, naudojant tik paprastą CSS.

Žemiau mes turime HTML5 struktūra įrašyti tris paveikslėlius su jos antrašte. Tai tik demonstravimo tikslais, jūsų žymėjimas neturi būti lygiai toks pat kaip šis fragmentas (pvz., Gali būti tik vienas vaizdas ar dar trys vaizdai), tačiau taškas yra sužinoti, kaip ši sintaksė gali būti taikoma tam tikrą HTML struktūrą.

Kiekviename iš aukščiau išvardintų vaizdų yra šie formatai ar plėtiniai, jpg, png, ir gif. Jie taip pat turi antraštę, vaizduojančią jos atvaizdą; ši antraštė tuomet veiks kaip vaizdo etiketė.

Taigi, čia yra planas, kiekvienam skirtingam vaizdo pratęsimui antraštei suteiksime skirtingas fono spalvas. JPG atvaizdas gaus a žalias antraštės spalva, PNG gaus mėlyna, ir galiausiai gif bus gautas violetinė.

Pirma, santykinai nustatykime figūros žymės padėtį, nes mes tęsiame taikymą absoliutus užrašo poziciją.

 figūra pozicija: santykinis;  

Pridėkite šiek tiek apdailos vaizdų su sienomis ir šešėliais.

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); dėžutės šešėlis: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Tada mes nustatome numatytąjį stilių ir pozicionavimą antraštei. Vaizdo antraštėje arba etiketėje bus 50 pikselių.

 img + figcaption spalva: #fff; pozicija: absoliutus; viršuje: 0; dešinėje: 0; plotis: 50px; aukštis: 50px; linijos aukštis: 50px; teksto derinimas: centras;  

Dabar atėjo laikas pridėti fono spalvą. Tam mes galime sujungti atributo selektorių su gretimuoju brolio pasirinkimo parinkikliu, +.

 img [src $ = ". jpg"] + figcaption fono spalva: # a8b700;  

Pirmiau minėtas fragmentas bus nukreiptas į kiekvieną vaizdą su šaltinio atributu, kuris baigiasi .jpg, tada gretimas selektorius suras elementą šalia jo. Šiuo atveju figcaption bus pridėta su # a8b700 fono spalva.

Ir čia yra visi kitų vaizdo formatų kodai .png ir .gif.

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

Dabar pažiūrėkime, kaip paaiškės, kaip gyvena iš toliau pateiktos nuorodos nuorodos, arba galite atsisiųsti šaltinį, kad galėtumėte jį peržiūrėti neprisijungę.

• Demo
• Atsisiųsti šaltinį

Vaizdo šaltiniai yra tokieMacPro 1, MacPro 2 ir MacPro 3

Išvada

Tikimės, kad jūs galite pamatyti elegantišką stiliaus pusę naudodami specialųjį selektorių, kaip tai, ką bandėme įrodyti aukščiau, naudodami atributo parinkiklį. Taigi, kai kitą kartą formuosite savo HTML, labai rekomenduojame atlikti tam tikrą tyrimą, ar jūsų stilius gali būti pritaikytas naudojant tam tikrą specialųjį selektorių, o ne sugadinti tinkamai struktūrizuotą žymėjimą su papildomais klasės arba ID.

Iš tikrųjų yra dar du nauji šio tipo pasirinktuvai, kuriuos aptarsime tolesniuose pranešimuose, todėl palaikykite ryšį.