在 WordPress 中用 CSS 定义图标区分为外链与内链

把博客外部链接加上小图标，让访客更加容易的分辨外部链接，而且也美观好看。
大家先看看这个效果：百度 注意到了吧？它在外部链接旁边加一个小图标，而且对于离站链接的图标已经出现了一种约定：一个框加一个箭头。

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

.external{
	background: url(images/externalLink.gif) no-repeat right center;
	padding-right:12px
}

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

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

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

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

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

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

大多数符合标准的浏览器都支持这种技术，而老式浏览器（比如 IE6 和更低版本）会忽略它。
当然，我们还可以扩展这种技术，如对邮件也进行突出显示。

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;
}