CSS3-attribuutin valitsin kohdistetaan tiedostotyyppiin

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

attribuuttivalitsimet on todella hyödyllinen ominaisuus valita elementti lisäämättä tarpeettomia id tai luokat. Niin kauan kuin kohdistetulla elementillä on sellainen ominaisuus kuin href, src ja tyyppi meidän ei tarvitse tehdä niin.

Ominaisuuksien valitsijat ovat itse asiassa olleet noin koska CSS 2.1, ja nyt, kun CSS3-spesifikaatioihin on lisätty muutamia muita attribuuttivalitsimia, voimme kohdistaa elementin määritteen vielä tarkemmin.

Ja tässä viestissä aiomme käyttää jotakin syntaksia valitaksesi tiedostotyyppi joka lisätään osana määritteen arvoa.

Syntaksi ja selaimen tuki

tiedostotyyppi on aina tiedostonimen lopussa. Joten valitaksesi sen tiedostotyyppi voimme käyttää seuraavaa syntaksia [Attr $ = "arvo"]. Tämä syntaksi käyttää $ = operaattori, joka kohdistaa määritteen arvon loppuun, esimerkiksi:

 a [href $ = ". pdf"]: ennen tausta: url ('… /images/document-pdf-text.png') ei-toista;  

Yllä oleva katkaisu valitsee jokaisen linkin, jonka määritteen arvo päättyy .PDF ja aseta sana-asiakirja-kuvake :ennen pseudo-elementti.

PDF-kuvakkeen lähde: Fuga-kuvakkeet

Vaikka tämä on tämän valitsimen yleinen käyttö, voimme varmasti ylittää sen.

Selaimen yhteensopivuus; vaikka tämä syntaksi on virallisesti otettu käyttöön CSS3-spesifikaationa, sitä on tosin tuettu Internet Explorer 7, joten voit käyttää sitä turvallisesti kaikissa malleissasi.

Esimerkki

Et koskaan tiedä, jos et koskaan yritä. Meidän täytyy vain kokeilla jotain uutta saadaksemme paremman käsityksen siitä, mitä emme vielä ymmärrä. Niinpä täällä näytämme, miten tämä syntaksi voi olla erittäin hyödyllinen ja kätevä kohdistaa tiettyyn HTML-rakenteeseen sisältyvä elementti, jota oli aikaisemmin ollut vähän vaikea soveltaa vain tavalliseen CSS: ään.

Alla on HTML5-rakenne luetella kolme kuvaa sen kuvatekstillä. Merkinnän ei tarvitse olla täsmälleen samanlainen kuin seuraava katkaisu (esim. Sinulla voi olla vain yksi kuva tai jopa kolme kuvaa), mutta kohta on, että saat tietää, miten tätä syntaksia voidaan soveltaa tietty HTML-rakenne.

Jokaisella yllä luetellulla kuvalla on seuraavat muodot tai laajennukset, jpg, png, ja gif. Niillä on myös kuvateksti, joka edustaa sen kuvan laajennusta; tämä kuvateksti toimii sitten kuvamerkinnänä.

Joten tässä on suunnitelma, annamme eri taustavärejä kuvatekstille jokaiselle erilaiselle kuvalaajennukselle. JPG-kuva saa a vihreä kuvatekstin väri, PNG saa sininen, ja lopulta gif saa violetti.

Ensinnäkin, asetetaan kuviomerkin sijainti suhteellisen, koska aiomme soveltaa absoluuttinen otsikko.

 kuva sijainti: suhteellinen;  

Lisää pieniä koristeita reunuksilla ja varjoilla.

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

Ja sitten asetamme tekstityksen oletustyyliä ja sijaintia. Kuvatekstissä tai etiketissä on 50 pikseliä.

 img + figcaption väri: #fff; asema: absoluuttinen; alkuun: 0; oikea: 0; leveys: 50px; korkeus: 50px; linjan korkeus: 50px; text-align: center;  

Nyt on aika lisätä taustaväri. Tätä varten voimme yhdistää attribuutinvalitsimen viereisen sisarenvalitsimen kanssa, +.

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

Yllä oleva katkaisu kohdistuu jokaiseen kuvaan, jonka lähde-attribuutti päättyy .jpg, sitten viereinen valitsin löytää sen vieressä olevan elementin. Tässä tapauksessa figcaption lisätään # a8b700 taustaväri.

Ja tässä on kaikki koodit muille kuvamuodoille, .png ja .gif.

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

Katsotaanpa nyt, miten käy ilmi alla olevasta demo-linkistä, tai muuten voit ladata lähdekoodin tutkiakseen sitä offline-tilassa.

• esittely
• Lataa lähde

Kuvalähteet ovat seuraavat: MacPro 1, MacPro 2 ja MacPro 3

johtopäätös

Toivomme, että tyylin tyylikäs puoli näkyy erikoisvalitsimella, kuten mitä olemme yrittäneet osoittaa edellä käyttämällä attribuutinvalitsinta. Niinpä seuraavan kerran kun muotoilet HTML-koodia, suosittelemme, että teet joitakin tutkimuksia siitä, voidaanko muotoilua soveltaa käyttämällä jotakin erityistä valitsinta sen sijaan, että tuhoutuisi asianmukaisesti jäsennellyt merkinnät ylimääräisellä luokat tai id.

Itse asiassa on olemassa kaksi uutta tämäntyyppistä valitsinta, jotka katetaan seuraavissa viesteissä, joten pysy kuulolla.