Volba atributu CSS3 Cílení typu souboru

Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - které jsou určeny k tomu, abyste z vás učinili lepšího návrháře a / nebo vývojáře. Klikněte zde zobrazit více článků ze stejné série.

selektorů atributů je opravdu užitečná funkce pro výběr prvku bez přidání zbytečného id nebo třídy. Pokud cílený prvek má atribut jako href, src a typ nemusíme to dělat.

Selektory atributů vlastně byly kolem od CSS 2.1, a nyní s několika dalšími typy selektorů atributů přidaných do specifikací CSS3 jsme schopni cíl atributu elementu cílit ještě konkrétněji.

V tomto příspěvku použijeme jednu ze syntaxí k výběru typ souboru který je vložen jako součást hodnoty atributu.

Syntaxe a podpora prohlížeče

typ souboru je vždy na konci názvu souboru. Takže, vyberte typ souboru můžeme použít následující syntaxi [attr $ = "hodnota"]. Tato syntaxe používá $ = operátor, který zacílí na konec hodnoty atributu, například:

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

Výše uvedený úryvek vybere každý odkaz, jehož hodnota atributu končí .pdf a vložte ikonu dokumentu do dokumentu :před pseudo-element.

Zdroj PDF: Ikony fugy

I když se jedná o běžné využití tohoto selektoru, určitě můžeme jít dál.

Pokud jde o kompatibilitu prohlížeče; ačkoli tato syntaxe je oficiálně zavedena jako specifikace CSS3, byla od té doby vlastně podporována Internet Explorer 7, můžete jej bezpečně aplikovat prostřednictvím všech vašich návrhů.

Příklad

To se nikdy nedozvíš, pokud to nezkusíš. Musíme jen zkusit něco nového, abychom lépe porozuměli něčemu, čemu ještě nerozumíme. Takže zde budeme demonstrovat, jak může být tato syntaxe velmi užitečná a praktická pro cílení na prvek v určité struktuře HTML, která byla dříve obtížně aplikovatelná pouze pomocí prostého CSS.

Níže máme Struktura HTML5 pro zobrazení tří obrázků s titulkem. Je to pouze pro demonstrační účely, vaše značení nemusí být přesně stejné jako následující úryvek (např. Můžete mít pouze jeden obrázek nebo dokonce tři další obrázky), ale smyslem je, abyste se dozvěděli, jak lze tuto syntaxi použít. konkrétní strukturu HTML.

Každý z výše uvedených obrázků má následující formáty nebo rozšíření, jpg, png, a gif. Mají také titulek, který představuje jeho rozšíření obrazu; tento popisek pak bude fungovat jako popisek obrázku.

Takže zde je plán, budeme dávat různé barvy pozadí pro titulek pro každé jiné rozšíření obrázku. Obraz JPG bude mít a zelená barva titulku, PNG dostane modrý, a nakonec gif dostane nachový.

Za prvé, pojďme nastavit pozici postavy postavy relativně, protože budeme platit absolutní pozice pro titulek.

 obrázek pozice: relativní;  

Přidejte trochu dekorace pro obrázky s ohraničením a stíny.

 img border: 5px pevná #ccc; -webk-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

A pak nastavíme výchozí styl a umístění pro titulek. Titulek obrázku nebo štítek bude mít čtverec 50px.

 img + figcaption barva: #fff; pozice: absolutní; nahoru: 0; vpravo: 0; šířka: 50px; výška: 50px; výška řádku: 50px; zarovnání textu: střed;  

Nyní je čas přidat barvu pozadí. K tomu můžeme kombinovat volič atributů s voličem sousedních sourozenců, +.

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

Výše uvedený úryvek bude cílit na každý obrázek, jehož zdrojový atribut končí .jpg, potom sousední volič najde prvek vedle něj. V tomto případě figcaption bude přidán # a8b700 barva pozadí.

A zde jsou všechny kódy pro zbytek obrazových formátů, .png a .gif.

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

Nyní se podívejme, jak to dopadá naživo z demo odkazu níže, jinak si můžete stáhnout zdroj, abyste ho prozkoumali offline.

• Demo
• Stáhněte si zdroj

Zdroje obrazu jsou následující: MacPro 1, MacPro 2 a MacPro 3

Závěr

Doufáme, že elegantní styl stylingu můžete vidět pomocí speciálního voliče, jako to, co jsme se snažili ukázat výše pomocí atributu selector. Takže až příště budete stylingovat svůj HTML, doporučujeme vám provést nějaký výzkum, zda lze styling aplikovat pomocí nějakého speciálního voliče, spíše než zničit řádně strukturovanou značku s extra třídy nebo id.

Ve skutečnosti existují další dva nové selektory tohoto typu, které budeme pokrývat v dalších příspěvcích, takže zůstaňte naladěni.