在wikipedia的网站上，每一个外部链接的右上角都有一个特殊标示链接特殊标示，能让访问者很方便的区别外部链接和内部链接。其实现方法是给每一个外部链接一个id，然后在css中定义该id的背景图片属性。对于普通站长来说，如果早期写模板的时候没有实施这项工作，后期更改将是一件很艰巨的事情。幸运的是我们利用css中的属性选择器可以轻松的区分内部链接和外部链接，从而给予他们不同的链接标记。
首先，在css中添加如下代码：

a {
background-image:url(/external.png) top right;
padding-right:10px;
}

代码含义：对所有链接元素(a)定义背景图片为external.png，并且将背景图片定义于链接的右上角，同时为了避免背景图片和链接重合，我们为链接设置了10像素的填充。
这样以来，所有的链接的右上方都有了
链接特殊标示
链接特殊标示

但我们的目的是只给外部链接定义此标示，下面就该我们的属性选择器登场了。
在css中添加如下代码：

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

代码含义：给所有目标以http://8732.lovecanon.com开头的链接定义背景图片为无，且没有填充。
刷新页面后，我们可以看到内部链接右上角的标示消除了，效果如下图：
链接特殊标示
大功告成了！！！
后来，我发现blog的底部区域的外部链接也增加了标示，有点影响美观，就对底部模块的链接定义了一个属性：

a {
background-image:none;
padding-right:0;
}

这个可以根据自己喜好选择定义，毕竟萝卜白菜各有所爱。如果喜欢，你也可以把那个链接标示换成其他的图标。
这样一来，我们的链接属性就更有趣了，例如我们可以给某个死党的链接全部标示为猪头或其他标示，还可以给自己的恋人的链接标示为心形或其他更能博取芳心的标示。

遗憾的是，IE6.0一下的IE浏览器都不支持属性选择器，所以ie6.0及其以下版本查看这些页面的时候，会出现所有的连接后面都有特殊标示。

原创文章，转载请注明出处:8732 http://8732.lovecanon.com


所属分类: 教程 | tags: . |