CSS3 Attributvelger Målretning af filtype
Det attribut vælgere er en virkelig nyttig funktion til at vælge et element uden at tilføje overflødigt id eller klasser. Så længe det målrettede element har en attribut som href, src og type det behøver vi ikke.
Attributvælgerne har faktisk eksisteret siden CSS 2.1, og nu med et par flere typer attribut attributorer tilføjet i CSS3 specifikationer, vi er i stand til at målrette elementets attribut endnu mere specifikt.
Og i dette indlæg skal vi bruge en af syntaksen til at vælge filtype som indsættes som en del af attributets værdi.
Syntax og Browser Support
Det filtype er altid i slutningen af filnavnet. Så, for at vælge det filtype vi kan bruge følgende syntaks [Attr $ = "værdi"]. Denne syntaks bruger $ = operatør, der vil målrette mod slutningen af attributværdien, for eksempel:
a [href $ = ".pdf"]: før baggrund: url ('... /images/document-pdf-text.png') no-repeat; Udsnittet ovenfor vælger hvert link, som attributværdien ender med .pdf og indsæt et ord-dokument-ikon i :Før pseudo-element.
PDF ikon kilde: Fugue Ikoner
Selvom dette er en fælles udnyttelse af denne vælger, kan vi helt sikkert gå ud over det.
Hvad angår browser kompatibilitet; Selv om denne syntaks er officielt indført som CSS3-specifikationen, har den faktisk været støttet siden Internet Explorer 7, så du kan trygt anvende det gennem alle dine designs.
Eksemplet
Du ved aldrig, hvis du aldrig forsøger. Vi skal bare prøve noget nyt for at få en bedre forståelse af noget, vi endnu ikke forstår. Så her skal vi demonstrere, hvordan denne syntaks kan være meget nyttig og praktisk at målrette mod et element i en bestemt HTML-struktur, der tidligere var svær at anvende ved brug af kun almindelig CSS.
Nedenfor har vi en HTML5 struktur at liste tre billeder med dets billedtekst. Det er kun til demonstrationsformål, du behøver ikke at være præcis som følgende uddrag (f.eks. Du kan kun have ét billede eller endda tre billeder), men det er meningen, du får at vide, hvordan denne syntaks kan anvendes i en bestemt HTML-struktur.
-
jpg -
png -
gif
Hvert af ovenstående billeder har følgende formater eller udvidelser, jpg, png, og gif. De har også en billedtekst, der repræsenterer dens billedudvidelse; denne billedtekst vil så fungere som billedetiketten.
Så her er planen, vi skal give forskellige baggrundsfarver til billedteksten for hver anden billedudvidelse. JPG-billedet vil få en grøn billedtekst farve, PNG vil få blå, og endelig vil gifen få lilla.
Lad os først sætte figurmærket position relativt, fordi vi skal anvende absolut position for billedteksten.
figur position: relative;
Tilføj lidt dekoration til billederne med grænser og skygger.
img border: 5px solid #ccc; -webkit-boks-skygge: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-skygge: 1px 1px 3px 0px rgba (0, 0, 0, .5);
Og så sætter vi standard stil og positionering for billedteksten. Billedteksten eller etiketten har 50 px firkant.
img + figcaption farve: #fff; position: absolut; top: 0; højre: 0; bredde: 50px; højde: 50px; linjehøjde: 50px; tekst-align: center;
Nu er det tid til at tilføje baggrundsfarven. For at gøre det kan vi kombinere attributvælgeren med den tilstødende søskendevælger, +.
img [src $ = ". jpg"] + figcaption baggrundsfarve: # a8b700;
Udsnittet ovenfor vil målrette mod hvert billede med kildetributtet, der slutter med .jpg, så finder den tilstødende vælger elementet ved siden af det. I dette tilfælde er figcaption vil blive tilføjet med # a8b700 baggrundsfarve.
Og her er alle koderne for resten af billedformaterne, .png og .gif.
img [src $ = ". png"] + figcaption baggrundsfarve: # 389abe; img [src $ = ".gif"] + figcaption baggrundsfarve: # 8960a7;
Lad os nu se, hvordan det viser sig at være levende fra demo-linket nedenfor, ellers kan du downloade kilden for at undersøge den offline.
- Demo
- Download kilde
Billedkilder er som følger: MacPro 1, MacPro 2 og MacPro 3
Konklusion
Vi håber, at du kan se den elegante side af styling ved hjælp af en speciel vælger, som det vi har forsøgt at demonstrere ovenfor ved hjælp af attributvælgeren. Så næste gang du styler din HTML, anbefaler vi stærkt, at du gør nogle undersøgelser af, om din styling kan anvendes ved hjælp af en speciel vælger, i stedet for at ødelægge din ordentligt strukturerede markering med ekstra klasser eller id.
Der er faktisk to nye nye selektorer af denne type, som vi vil dække i de næste indlæg, så hold tunet.
