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

王朝学院·作者佚名  2009-05-23
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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

}

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航