用 CSS 突出显示不同类型的链接，区分网站内链和外链

最近把博客指向外部的链接全部启用新窗口打开了，觉得不可能要求大家都像我一样习惯用右键选择新窗口打开！！但又觉得不是很符合“国际标准”，呵呵，大家可能发现像 Google 等网站都是默认在本窗口打开链接的，而 W3C 也将target=”_blank” 排除在了标准之外，据说这样更符合易用性、友好性的用户体验。想想也是，不经过用户同意，没有明确提示就打开一 个新窗口的确有点不礼貌。

于是，我们就给用户一个提示，让外部链接看起来不一样，让用户选择是离开当前站点，还是新窗口或新的标签页中打开这个链接。今天，就介绍一下如何用 CSS 实现突出显示不同类型的链接，但这里并没有实现自动让外部链接新窗口打开，因为这不是 CSS 的能力范围之内，但也算是 CSS 应用的一个技巧吧！

这种例子像 维基百科 就是一个很好的例子，在外部链接旁边加一个小图标，而且对于离站链接的图标已经出现了一种约定：一个框加一个箭头。

实现这种效果最容易的方法是在所有外部链接上加一个类，然后将图标作为背景图像应用。

如上面的示例中，给链接设置少量的右填充，从而给图标留出空间，然后将图标作为背景图像应用于右上角。尽管这个方法是有效的，但必须手工地在每个外部链接上添加类，有办法让 CSS 判断链接是否是外部链接吗？确实有办法，我们可以用属性选择器。

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

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

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

大多数符合标准的浏览器都支持这种技术，而老式浏览器（比如 IE6 和更低版本）会忽略它。

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

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

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

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

但本方法对 IE6 没有效果，而且并没有实现自动让外部链接在新窗口打开。如果想实现这样的效果，就必须用到 JavaScript 和 DOM ，本站现在用的是 jQuery 的方法。也只需要几句代码就可以实现，具体的下次再介绍！