CSS3 atribūtu atlasītājs Mērķauditorijas atlase ar faila tipu

Šis raksts ir daļa no mūsu "HTML5 / CSS3 konsultāciju sērija" - veltīts, lai palīdzētu jums kļūt par labāku dizaineru un / vai izstrādātāju. Noklikšķiniet šeit lai redzētu vairāk rakstu no vienas sērijas.

The atribūtu selektori ir patiešām noderīga funkcija, lai atlasītu elementu, nepievienojot lieku ID vai klases. Kamēr mērķa elementam ir tāds atribūts kā href, src un veids mums tas nav jādara.

Atribūtu atlasītāji faktiski ir bijuši apkārt kopš CSS 2.1, un tagad ar dažiem vairākiem atribūtu selektoru veidiem, kas pievienoti CSS3 specifikācijās, mēs varam mērķēt elementa atribūtu vēl precīzāk.

Un šajā ziņojumā mēs izmantosim vienu no sintaksēm, lai izvēlētos faila tips kas tiek pievienots kā atribūta vērtības daļa.

Sintakses un pārlūkprogrammas atbalsts

The faila tips vienmēr ir faila nosaukuma beigās. Tātad, lai to izvēlētos faila tips mēs varam izmantot šādu sintaksi [attr $ = "vērtība"]. Šī sintakse izmanto $ = operators, kas noteiks atribūtu vērtības beigas, piemēram:

 a [href $ = ". pdf"]: pirms fons: url ('… /images/document-pdf-text.png') nav atkārtotas;  

Iepriekš minētajā fragmentā tiks atlasīta katra saite, kurai atribūta vērtība beidzas .pdf un ievietojiet vārdu dokumenta ikonu : pirms pseidoelements.

PDF ikonas avots: Fuga ikonas

Lai gan tas ir kopējs šī selektora pielietojums, mēs noteikti varam to pārsniegt.

Attiecībā uz pārlūkprogrammas saderību; lai gan šī sintakse ir oficiāli ieviesta kā CSS3 specifikācija, kopš tā laika tā ir atbalstīta Internet Explorer 7, lai jūs to varētu droši lietot, izmantojot visus savus dizainus.

Piemērs

Jūs nekad nezināt, ja jūs nekad nemēģināsiet. Mums vienkārši jāmēģina kaut kas jauns, lai iegūtu labāku izpratni par kaut ko, ko mēs vēl nesaprotam. Tātad, šeit mēs parādīsim, kā šī sintakse var būt ļoti noderīga un ērta, lai mērķētu kādu elementu konkrētā HTML struktūrā, kuru agrāk bija grūti izmantot, izmantojot tikai vienkāršu CSS.

Tālāk mums ir HTML5 struktūra uzskaitīt trīs attēlus ar tās parakstu. Tas ir tikai demonstrācijas nolūkos, jūsu atzīmei nav jābūt tieši tādai, kā šāds fragments (piem., Jums var būt tikai viens attēls vai pat vēl trīs attēli), bet punkts ir tas, ka jūs zināt, kā šo sintaksi var lietot konkrētu HTML struktūru.

Katram no iepriekš uzskaitītajiem attēliem ir šādi formāti vai paplašinājumi, jpg, png, un gif. Viņiem ir arī paraksts, kas attēlo tā attēla paplašinājumu; pēc tam šis paraksts darbosies kā attēla etiķete.

Tātad, šeit ir plāns, mēs piešķirsim dažāda fona krāsas katram dažādam attēla paplašinājumam. JPG attēls saņems a zaļa paraksta krāsa, PNG saņems zils, un visbeidzot, gif saņems violets.

Pirmkārt, pieņemsim, ka attēla taga pozīcija ir salīdzinoši, jo mēs turpinām piemērot absolūts pozīcijas parakstu.

 attēls amats: radinieks;  

Pievienojiet nedaudz apdares attēliem ar robežām un ēnām.

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

Un tad mēs iestatījām paraksta noklusējuma stilu un pozicionēšanu. Attēla virsrakstam vai etiķetei būs 50px kvadrāts.

 img + figcaption krāsa: #fff; pozīcija: absolūta; tops: 0; pa labi: 0; platums: 50px; augstums: 50px; līnijas augstums: 50px; teksta saskaņošana: centrs;  

Tagad ir pienācis laiks pievienot fona krāsu. Lai to izdarītu, mēs varam apvienot atribūtu selektoru ar blakus esošo brāļu māsu selektoru, +.

 img [src $ = ". jpg"] + figcaption fona krāsa: # a8b700;  

Iepriekš minētais fragments būs vērsts uz katru attēlu ar avota atribūtu, kas beidzas ar .jpg, tad blakus esošais selektors atradīs blakus esošo elementu. Šajā gadījumā figūra tiks pievienots # a8b700 fona krāsa.

Un šeit ir visi kodi pārējiem attēla formātiem, .png un .gif.

 img [src $ = ". png"] + figcaption fona krāsa: # 389abe;  img [src $ = ". gif"] + figcaption fona krāsa: # 8960a7;  

Tagad aplūkosim, kā izrādās, ka dzīvo no zemāk redzamās demo saites, vai arī jūs varat lejupielādēt avotu, lai to pārbaudītu bezsaistē.

• Demo
• Lejupielādēt avotu

Attēla avoti ir šādiMacPro 1, MacPro 2 un MacPro 3

Secinājums

Mēs ceram, ka jūs varat redzēt elegantu stila pusi, izmantojot īpašu selektoru, piemēram, to, ko esam mēģinājuši pierādīt iepriekš, izmantojot atribūtu selektoru. Tātad, nākamajā reizē, kad veidosit savu HTML, mēs ļoti iesakām veikt dažus pētījumus par to, vai jūsu stilu var izmantot, izmantojot kādu īpašu selektoru, nevis iznīcināt pareizi strukturētu iezīmējumu ar papildu klases vai ID.

Patiesībā ir vēl divi jauni šāda veida selektori, kurus mēs aptversim nākamajos amatos, tāpēc palieciet.