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

我们在设计网站的时候，有的时候需要根据页面元素的属性来制作不同的样式，比如，对于不同的链接类型，显示不同的链接图标。CSS的选择器是个很有用的技术，通过它们，我们可以很容易的实现某些效果。今天我们通过制作个性化链接样式来介绍一下CSS的属性选择器。

先看一下演示吧：

正如上图中看到的那样，我们为每种链接定义了不同的样式：当链接a的href属性的值为"mailto"邮件链接的时候，在该链接后面显示一个邮件的图标；当链接为word文件时，后面显示word文档图标；当链接地址为mp3的时候，显示音乐播放图标；当链接地址包含"qianduan.net"的时候，就显示一个首页图标……

其实实现这样的功能非常容易，我们先来看看CSS的属性选择器的语法：

需要注意的是，CSS选择器无论CSS ２.１版本还是CSS 3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏览器才不支持。

好了，让我们来实现这些样式吧：

1.链接的基础样式

首先我们准备了一个CSS Sprite

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