使用CSS选择器创建个性化链接样式（2）
作者：神采飞扬 来源：前端观察 发布时间：2009-06-02 13:07:00
2.定义个性化样式
现在我们来为各种类型的链接定义各自的样式，其实这个时候我们需要做的仅仅是定义不同的背景图片位置(background-position)：
mailto
mailto邮件链接是形如href=”mailto:abc@abc.com”的样式，它们的href属性的值以mailto开头，那么我们使用[att^=val]这种格式：
a[href^="mailto:"] {
background-position:right -242px;
}
word文档
我们一般认为，所有的doc文件链接都是href=”abc.doc”这种格式，也就是链接地址一.doc结束，那么我们需要使用[att$=val]这种格式。样式如下：
a[href$=".doc"] {
background-position:right -160px
}
PDF、excle、mp3等格式的文档也是通过这种方法来实现的。
包含qianduan.net字段的链接
对于包含某个字符串的链接，可以使用[att*=val]这种方式：
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}
而我们在使用的时候，也不需要添加额外的class：
<a href="abc.doc">Word文档</a>
仅此而已。
到这里，我们就完成了演示图片的所有样式
看看演示吧：
cssSelector_a.htm
0
投稿猜你喜欢
- 两个多月来唯一一次有时间哄么么睡觉，我先给他讲了遍《从前有座山》，还是不睡。又给他讲了这个“保安的故事”：小A是名很敬业的保安，负责保护客户
- javascript可以根据输入值自动搜索显示相关的select列表，对于列表很长时可以很方便的查找到要的值。js代码：<script
- MySQL数据库由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.本文中列举了一个P2P应用开发实例，实例中使用了MySQL来
- 代码如下:--函数 CREATE function fn_GetPy(@str nvarchar(4000)) returns nvarch
1.11 – 添加缎带修饰网页局部模块中右上角的蓝色缎带修饰是这个网站界面设计中的一个亮点，只要合理的运用CSS、PNG透明图片和绝对定位属- 做网站数据库，是选SQL Server还是Access好，可能您会说：选MySQL好，不过现在只是讨论IIS+ASP这种架构下的选择，不讨论
- 本文介绍了三种跨域访问的方法，php，asp及jsp种访问远程文件的方法。这几天脑细胞剩下的不多了，不过问题都一个个解决了。我希望搜索引擎能
- 代码如下:--获取当前时间 Select getdate() --获取当前年月日 YY代表年,MM代表月,DD代表日,hh代表时
- 俗话说，“工欲善其事，必先利其器”。对于前端开发工程师来说，基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。下面就与大家分享2
- 现在网页的设计都讲究整体统一风格，无论是网页的文字、图像，还是浏览器的滚动条都要求颜色和风
- 最近发现数据库服务器压力很大，CPU经常达到100％。查看进程，发现有大量的sp_cursorclose;1进程信息。网上查了下，出现sp_
- 提要：系统自带的mysql默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过
- 在给blog加上无刷新搜索和即时验证检测后，又看了下代码，感觉太过麻烦，就把XMLHttpRequest请求封装到一个类里面，用起来方便多了
- 只有mdf文件的数据库附加失败的修复 附加时报如下错误： 服务器: 消息 1813，级别 16，状态 2，行 1 未能打开新数据库 '
- INSERT INTO Table (TestCol) VALUES(‘')其中的TestCol字段，其实在设计的时候，已经被设计为
- 网页开发人员常常希望能够了解并掌握多种语言，结果是，学习一门语言的所有内容是棘手的，但是却很容易发现你并没有完全利用那些比较特殊却很有用的标
- 应该是很方便的了，支持几乎所有主流浏览器（ie5，6，7，8；ff；傲游；Opera）已更新至可提交录入内容<script type=
- 继续Mootools常用方法扩展，依然还是String类的扩展。方法：format说明：一个非常简单的format方法，和C#
- 在做我的友情链接批量检查工具过程中，碰到一些情况，就是对方网页会用gzip压缩。用gzip压缩的好处是，能压缩网页大小，加快网页的浏览速度，
- 为什么要用flash呢？动画流畅，视觉效果好缓存能力强那使用flash有什么问题呢？需要Flash播放器在M$的补丁打遍天下之前IE有那神奇
