私たちのブログでは、他の人がダウンロードできるリソースを提供することがありますが、PJBlog では、すべてのダウンロード リンクが 1 つのアイコンのみで表されます。この新しい技術では、新しい CSS3 属性セレクターを使用して、ダウンロードされたファイルの種類に応じて異なるアイコンを表示できます。
ここで使用するのは
E [att$=value]{…}
value で終わる要素 E をすべて選択することを意味します。次に、次のように書くことができます。
a[href$='.torrent'] {
パディング: 5px 20px 5px 0;
背景: 透明 URL(icons/icon_torrent.gif) リピートなし中央右。
}
a[href$='.vcard'] {
パディング: 5px 20px 5px 0;
背景: 透明 URL(icons/icon_vcard.gif) リピートなし中央右。
}
a[href$='.exe'] {
パディング: 5px 20px 5px 0;
背景: 透明 URL(icons/icon_exe.gif) リピートなし中央右。
}
a[href$='.dmg']、a[href$='.app'] {
パディング: 5px 20px 5px 0;
背景: 透明 URL(icons/icon_dmg.gif) リピートなし中央右。
}