WEB开发网
开发学院网页设计DivCss CSS应用:根据文件类型显示不同图标 阅读

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

 2009-05-22 19:36:17 来源:WEB开发网   
核心提示:有时候我们的博客上经常会提供一些资源供别人下载,但是像是PJBlog中,CSS应用:根据文件类型显示不同图标,所有的下载链接都只用一个图标来表示,有了新CSS3的属性选择符这项新技术后我们就可以根据下载文件的不同类型显示不同的图标了

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

Tags:CSS 应用 根据

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接