最近在看《精通CSS-高级Web标准解决方案》，发现有些笔记是必须记下的，以备不时之需~

我们在浏览网站的过程中，不会刻意地去观察要点击的链接是指向本站点上的另一个页面，还是指向另一个站点。或许我们都有过这样的经历：单击一个链接，期望浏览器转到当前站点上的另一个页面，但是不经意间却点击的这个链接却指向了其他站点。

当然，为了避免这么做也有有效的解决方法，例如采取在新窗口中打开链接。今天要说的是另外种解决方法。比如说，我们能够让外部链接看上去和本站的链接不太一样，为此，我们可以在外部链接旁边加上一个小图标，让他与众不同~

实现这种效果最容易的方法只要在所有的外部链接上加上一个类，然后将图标作为背景图像应用。这个方法可以实现我们想要的效果，但是如果页面多了，那将变得非常繁琐。（因为我们必须要有足够的耐心去在每个外部链接上添加类）。除此之外，我们可以利用属性选择器让CSS判断链接是否是外部链接。

点击我先看Demo

经过测试，可以发现除了IE6以外的其他主流浏览器都可以完美支持。下面来分析下网页源码。

CSS3 扩展了属性选择器的功能，提供了子字符串匹配属性选择器，这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。

这种技术的工作方式是使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接：

a[href^="http:"]{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}

 这应该会突出显示所有的外部链接，但也会选中使用绝对 URL 而不是相对 URL 的内部链接，为了避免这个问题，需要重新设置指向自己站点的所有链接。

a[href^="http://yoursite.com"],a[href^="http://www.yoursite.com"]{
background-image:none; 
padding-right:0;
}

当然，我们还可以扩展这种技术，如对邮件也进行突出显示。

a[href^="mailto:"]{
background: url(images/email.png) no-repeat right top; 
padding-right:10px;
}

我们还可以用 CSS 选择器来区分一些下载链接，如一个 PDF 或 Word 文档。这要使用 [att$=val] 属性选择器，它寻找以特定值结尾的属性：

a[href$=".pdf"]{
background: url(images/pdfLink.png) no-repeat right top; 
padding-right:10px;
}

a[href$=".doc"]{
background: url(images/pdfLink.png) no-repeat right top; 
padding-right:10px;
}

类似的还有 RSS(feec) 链接：

a[href$=".rss"], a[href$=".rdf"]{
background: url(images/feedLink.png) no-repeat right top; 
padding-right:10px;
}

这些技术都有助于改进用户在站点上的浏览体验，让用户明确地了解单击链接时会发生的情况，避免不必要的取消操作和烦恼。

但本方法对 IE6 没有效果，而且并没有实现自动让外部链接在新窗口打开。如果想实现这样的效果，就必须用到 JavaScript 和 DOM 。