CSS3 attribútumválasztó a fájltípus célzása

Ez a cikk a mi része "HTML5 / CSS3 oktatóanyagok sorozat" - szentelt, hogy segítsen neked egy jobb tervező és / vagy fejlesztő. Kattints ide több cikket láthat ugyanazon sorozatból.

A attribútumválasztók egy nagyon hasznos funkció egy elem kiválasztásához anélkül, hogy felesleges lenne id vagy osztályok. Mindaddig, amíg a célelemnek van egy attribútuma href, src és típus nem kell ezt megtennünk.

Az attribútum-szelektorok valójában körül voltak a CSS 2.1 óta, és most néhány további attribútum-szelektor-típus hozzáadásával a CSS3 specifikációkban, még pontosabban tudjuk célozni az elem attribútumát.

És ebben a bejegyzésben a szintaxis egyikét használjuk a kiválasztáshoz fájltípus amely az attribútum értékének részeként kerül beillesztésre.

A szintaxis és a böngésző támogatása

A fájltípus mindig a fájlnév végén van. Tehát, hogy kiválassza ezt fájltípus használhatjuk a következő szintaxist [Attr $ = "érték"]. Ez a szintaxis a $ = operátor, amely az attribútumérték végét célozza meg, például:

 a [href $ = ". pdf"]: előtt háttér: url ('… /images/document-pdf-text.png') nincs ismétlés;  

A fenti részlet minden olyan linket választ ki, amelyhez az attribútum értéke véget ér .pdf és helyezzen be egy szó-dokumentum-ikont a :előtt pszeudoelem.

PDF ikon forrás: Fúga ikonok

Bár ez a választó gyakori kihasználtsága, biztosan túlléphetünk.

A böngésző kompatibilitása tekintetében; bár ez a szintaxis hivatalosan a CSS3 specifikációként kerül bevezetésre, valójában már támogatott Internet Explorer 7, így biztonságosan alkalmazhatja a terveket.

A példa

Soha nem fogod megtudni, ha nem próbálod meg. Csak meg kell próbálnunk valamit, hogy jobban megértsük, amit még nem értünk. Tehát itt megmutatjuk, hogy ez a szintaxis nagyon hasznos és hasznos lehet egy olyan HTML-struktúra egy elemének célzásához, amely korábban csak egy egyszerű CSS használatával volt nehéz..

Az alábbiakban van egy HTML5 struktúra három kép felsorolása a felirattal. Ez csak demonstrációs célokra szolgál, a jelölésnek nem kell pontosan úgy lennie, mint a következő részlet (pl. Csak egy kép vagy még három kép), de a lényeg, hogy megtudja, hogyan alkalmazható ez a szintaxis egy adott HTML struktúrát.

A fent felsorolt ​​képek mindegyike a következő formátumokkal vagy bővítményekkel rendelkezik, jpg, png, és gif. Van egy felirata is, amely a kép kiterjesztését reprezentálja; ez a felirat ezután képcímkéje lesz.

Tehát itt van a terv, különböző háttérszíneket adunk a különböző képkiterjesztések feliratozásához. A JPG kép egy zöld felirat színe, a PNG lesz kék, és végül a gif lesz lila.

Először is viszonylag állítsuk be a figura címke pozícióját, mert alkalmazunk abszolút pozíció a felirathoz.

 ábra pozíció: relatív;  

Adjunk hozzá egy kis díszletet a képek határához és árnyékához.

 img border: 5px szilárd #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); doboz-árnyék: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

Ezután beállítjuk az alapértelmezett stílust és a feliratozást. A képfelirat vagy a címke 50px négyzet lesz.

 img + figcaption szín: #fff; pozíció: abszolút; top: 0; jobb: 0; szélesség: 50px; magasság: 50px; vonalmagasság: 50px; szöveg-igazítás: központ;  

Most itt az ideje, hogy hozzáadjuk a háttérszínt. Ehhez kombinálhatjuk az attribútumválasztót a szomszédos testvérválasztóval, +.

 img [src $ = ". jpg"] + figcaption háttérszín: # a8b700;  

A fenti töredék minden képet a forrás attribútummal végződik .jpg, akkor a szomszédos választókeret a mellette lévő elemet fogja megtalálni. Ebben az esetben a figcaption hozzáadódik a # a8b700 háttérszín.

És itt van a többi képformátum kódja, a .png és a .gif.

 img [src $ = ". png"] + figcaption háttérszín: # 389abe;  img [src $ = ". gif"] + figcaption háttérszín: # 8960a7;  

Most nézzük meg, hogy kiderül, hogyan élnek az alábbi demo linkről, vagy letöltheti a forrást, hogy megvizsgálja azt offline állapotban.

• Demó
• Letöltés forrása

A képforrások a következők: MacPro 1, MacPro 2 és MacPro 3

Következtetés

Reméljük, hogy a stílus stílusos oldalát egy speciális szelektor segítségével láthatja, mint amilyet az attribútumválasztó segítségével megpróbáltunk bemutatni. Tehát, ha legközelebb formázza a HTML-kódot, nagyon ajánljuk, hogy végezzen néhány kutatást arról, hogy a stílusát speciális speciális választóval lehet-e alkalmazni, ahelyett, hogy tönkretenné a megfelelően strukturált jelölését extra osztályok vagy id.

Valójában még két új ilyen típusú szelektor található, amelyeket a következő üzenetekben fedezünk fel, így maradjon hangolva.