有時候我們的部落格上常常會提供一些資源供別人下載,但像是PJBlog中,所有的下載連結都只用一個圖示來表示。有了新CSS3的屬性選擇符這項新技術後我們就可以根據下載檔案的不同類型顯示不同的圖示了。
這裡我們要用的是
E [att$=value]{…}
它的意思是用以選取所有以value結尾的元素E。那我們可以這樣寫:
a[href$='.torrent'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_torrent.gif) no-repeat center right;
}
a[href$='.vcard'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_vcard.gif) no-repeat center right;
}
a[href$='.exe'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_exe.gif) no-repeat center right;
}
a[href$='.dmg'], a[href$='.app'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_dmg.gif) no-repeat center right;
}