用CSS样式表打造不一样的超级链接

• 用CSS样式表打造不一样的超级链接
• 学习用CSS样式表打造不

    我们要达到的效果是，给所有指向非本站的链接都加上一个小图标以告诉用户点击这个链接会让你离开本站，这是一个外部链接。当然这可能通过比较复杂的JavaScript来实现，但是我们现在可以通过CSS 3的属性选择符来实现这个功能。
a[href^=”http:”] {  
 background:url(images/externalLink.gif) no-repeat right top;  
 padding-right:10px;  
} 

    上面这段代码的意思是：所有以http:开头的链接都会加上一个小箭头的图标，提示用户这是一个外部链接，用户点击会离开本站。可以说，这个功能是非常人性化，突出了Web设计的易用性。
     当然，这是针对指向本站的链接都使用了相对地址的。如果指向本站的链接也是以http:开头的，或者有使用既有使用绝对地址又有使用相对地址的怎么呢？我们可以使用如下代码：

a[href^=”http:”] {  
 background:url(images/externalLink.gif) no-repeat right top;  
 padding-right:10px;  
}  
a [href*=”www.dudo.org”] {  
 background:none;  
 padding:0;  
} 

    上面这两条规则是：所有以http:开头的均加上外部链接的图标，后面紧接着以 开头的都不使用，自然相对地址因为不是以http开头所有不会出现箭头图标。
文章来源：