CSS应用:根据文件类型显示不同图标

CSS应用:根据文件类型显示不同图标,标签：html与css教程,css教程,html网页设计教程,http://www.xuehuiba.com

有时候我们的博客上经常会提供一些资源供别人下载，但是像是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;  
}