JET'S BLOG

有时候博客经常会提供一些资源供别人下载,但是通常程序中所有的下载链接都只用一个图标来表示.有了新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;     
}