Add-Icons-next-to-your-links-with-CSS

有时我们可能希望内部链接与外部链接显示不同的样式,如我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开。

    
有许多人使用JavaScript或者jQuery自动添加文件类型的图标,当然利用CSS2.1也可以很容易做到,CSS2中引入了属性选择器,它可以根据元素的属性及属性值来选择元素。

    
但是注意的是IE6以上的版本和FF 才支持。

  

演示:

    
Add-Icons-next-to-your-links-with-CSS.html

    

    

    
那,诀窍是使用属性选择器a[href^=”http://“]

      
标签名[标签的属性 / 标签的属性=”属性值”]{参数}

例子1:

给所有<a>标签的href属性值是“http://”开头的文字超链接,都在右边加上图标。

Css Code:

a[href^="http://"] {

        
background:transparent url(../images/external.png) center right no-repeat;

        
display:inline-block;

        
padding-right:15px;

}

    

Html Code:

<a href="http://blog.moocss.com">index</a>

<a href="http://blog.moocss.com">首页</a>

例子2:

所有以 .zip .rar .gzip扩展名结束的,将会显示一个相同的图标在旁边

CSS:

a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {

      
background:transparent url(../images/zip.png) center left no-repeat;

      
display:inline-block;

      
padding-left:20px;

      
line-height:18px;

}

HtmlCode:

    
<a href="demo1.zip">Zip document links </a>

    
<a href="demo1.rar">Rar document links </a>

    
<a href="demo1.gzip">Gzip document links </a>

一个综合的例子:

Css Code:

/* PDF document links */

a[href$='.pdf'] {

background:transparent url(../images/pdf.png) center left no-repeat;

display:inline-block;

padding-left:20px;

line-height:15px;

}

/* Excel Documents links */

a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] {

background:transparent url(../images/excel.png) center left no-repeat;

display:inline-block;

padding-left:20px;

line-height:15px;

}

/* Word Document Links */

a[href$='.doc'], a[href$='.rtf'], a[href$='.wps'], a[href$='.txt'] {

background:transparent url(../images/word.png) center left no-repeat;

display:inline-block;

padding-left:20px;

line-height:15px;

}

/* mailto: links */

a[href^="mailto:"] {

background:transparent url(../images/mailto.png) center left no-repeat;

display:inline-block;

padding-left:20px;

line-height:15px;

}

Html Code:

<a href="demo1.pdf">PDF document links </a>

<a href="demo1.xls">Excel Documents links</a>

<a href="demo1.doc">Word Document Links </a>

<a href="mailto:blog.moocss.com@gmail.com">RainBow-Email</a> 

 

站点统计