CSS属性选择器制作个性化链接样式

作者佚名技术来源 CSS技术浏览发布时间 2012-03-02

s的图片，我们将所有的图标都整合到这一个a.gif中。

a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;
color:#369;
line-height:24px;
}

这样，我们就为所有的链接定义了默认的样式了，所有的链接右侧都会显示一个红色的小箭头图标。

2.定义个性化样式

现在我们来为各种类型的链接定义各自的样式，其实这个时候我们需要做的仅仅是定义不同的背景图片位置(background-position)：

mailto

mailto邮件链接是形如href=”mailto:abc@abc.com”的样式，它们的href属性的值以mailto开头，那么我们使用[att^=val]这种格式：

1
2
3

a[href^="mailto:"] {
 background-position:right -242px;
}

word文档

我们一般认为，所有的doc文件链接都是href=”abc.doc”这种格式，也就是链接地址一.doc结束，那么我们需要使用[att$=val]这种格式。样式如下：

1
2
3

a[href$=".doc"] {
background-position:right -160px
}

PDF、excle、mp3等格式的文档也是通过这种方法来实现的。

包含qianduan.net字段的链接

对于包含某个字符串的链接，可以使用[att*=val]这种方式：

1
2
3

a[href*="qianduan.net"] {
background-position:right -328px
}

最后让我们看看完整的样式吧：

a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;color:#369;line-height:24px;
}
a[href^="mailto:"] {background-position:right -242px;}
a[href$=".doc"] {background-position:right -161px}
a[href$=".xls"] {background-position:right -282px}
a[href$=".pdf"] {background-position:right -79px}
a[href$=".mp3"] {background-position:right -204px}
a[href$=".swf"] {background-position:right -120px}
 a[href$=".rar"] {background-position:right -38px}
a[href*="qianduan.net"] {background-position:right -328px}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 总结:CSS样式表的技术优势和功能下一篇: CSS网页布局的一些常见规则

关于CSS属性选择器制作个性化链接样式的所有评论

随机推荐