CSS3 attribútumválasztó a fájltípus célzása
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.