CSS3 Attribuutselector Targeting van het bestandstype

Dit artikel maakt deel uit van ons "HTML5 / CSS3 Tutorials-serie" - toegewijd om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

De attribuut selecteurs is echt een handige functie om een ​​element te selecteren zonder overbodig te maken ID kaart of klassen. Zolang het doelelement een attribuut als heeft href, src en type dat hoeven we niet te doen.

De attribuutselectoren zijn er eigenlijk al geweest sinds CSS 2.1, en nu met nog een paar typen attribuutselectoren toegevoegd in de CSS3-specificaties, zijn we in staat om het kenmerk van het element nog specifieker te targeten.

En in deze post gaan we een van de syntaxis gebruiken om de te selecteren bestandstype die wordt ingevoegd als onderdeel van de waarde van het kenmerk.

Syntaxis en browserondersteuning

De bestandstype is altijd aan het einde van de bestandsnaam. Dus om dat te selecteren bestandstype we kunnen de volgende syntaxis gebruiken [Attr $ = "waarde"]. Deze syntaxis gebruikt de $ = operator die het einde van de kenmerkwaarde target, bijvoorbeeld:

 a [href $ = ". pdf"]: before background: url ('... /images/document-pdf-text.png') geen herhaling;  

Het bovenstaande fragment selecteert elke link waarmee de kenmerkwaarde eindigt .pdf en voeg een pictogram van een woord-document in de :voor pseudo-element.

PDF Icon Bron: Fuga pictogrammen

Hoewel dit een veelgebruikt gebruik van deze selector is, kunnen we zeker verder gaan dan dat.

Wat betreft browsercompatibiliteit; hoewel deze syntaxis officieel is geïntroduceerd als de CSS3-specificatie, is deze sindsdien feitelijk ondersteund Internet Explorer 7, zodat je het veilig kunt toepassen in al je ontwerpen.

Het voorbeeld

Je zal het nooit weten als je het niet probeert. We moeten gewoon iets nieuws proberen om een ​​beter begrip te krijgen van iets dat we nog niet begrijpen. Dus hier gaan we demonstreren hoe deze syntaxis zeer nuttig en handig kan zijn om een ​​element in een bepaalde HTML-structuur te targeten die vroeger een beetje moeilijk was toe te passen met alleen gewone CSS.

Hieronder hebben we een HTML5-structuur om drie afbeeldingen weer te geven met het bijschrift. Het is alleen voor demonstratiedoeleinden, je opmaak hoeft niet precies hetzelfde te zijn als het volgende fragment (je hebt bijvoorbeeld maar één afbeelding of zelfs drie extra afbeeldingen), maar het gaat erom dat je weet hoe deze syntaxis kan worden toegepast in een bepaalde HTML-structuur.

Elk van de afbeeldingen hierboven vermeld heeft de volgende formaten of uitbreidingen, jpg, png, en gif. Ze hebben ook een bijschrift dat de beelduitbreiding vertegenwoordigt; dit bijschrift fungeert dan als het afbeeldingslabel.

Dus, hier is het plan, we gaan verschillende achtergrondkleuren geven voor het bijschrift voor elke verschillende beelduitbreiding. De JPG-afbeelding krijgt een groen bijschriftkleur, krijgt de PNG blauw, en als laatste zal het GIF krijgen Purper.

Laten we eerst de positie van het figuurlabel relatief instellen, omdat we gaan toepassen absoluut positie voor het bijschrift.

 figuur positie: relatief;  

Voeg een kleine decoratie toe voor de afbeeldingen met randen en schaduwen.

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

En vervolgens stellen we de standaardstijl en positionering voor het bijschrift in. Het bijschrift of label van de afbeelding heeft een vierkant van 50px.

 img + figcaption color: #fff; positie: absoluut; boven: 0; rechts: 0; breedte: 50px; hoogte: 50px; regelhoogte: 50px; text-align: center;  

Nu is het tijd om de achtergrondkleur toe te voegen. Om dit te doen, kunnen we de attribuutselector combineren met de aangrenzende broer / zus-selector, +.

 img [src $ = ".jpg"] + figcaption background-colour: # a8b700;  

Het bovenstaande fragment zal elke afbeelding targeten met het bronattribuut dat eindigt op .jpg, dan vindt de aangrenzende selector het element ernaast. In dit geval de figcaption zal worden toegevoegd met de # a8b700 Achtergrond kleur.

En hier zijn alle codes voor de rest van de afbeeldingsformaten, .png en .gif.

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

Laten we nu kijken hoe het live uit de demolink hieronder blijkt, of anders kunt u de bron downloaden om deze offline te bekijken.

• demonstratie
• Download de bron

Beeldbronnen zijn als volgt: MacPro 1, MacPro 2 en MacPro 3

Conclusie

We hopen dat je de elegante kant van styling kunt zien met een speciale selector, zoals wat we hierboven hebben geprobeerd te demonstreren met de attribuutselector. Dus, de volgende keer dat u uw HTML aan het vormgeven bent, raden we u ten zeerste aan enig onderzoek te doen naar de vraag of uw stijl kan worden toegepast met een speciale selector, in plaats van uw goed gestructureerde opmaak te verpesten met extra klassen of ID kaart.

Er zijn eigenlijk nog twee nieuwe selectors van dit type die we in de volgende posts zullen behandelen, dus houd ons in de gaten.