《
使用CSS选择器实现超链接带带图标样式》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233O42013.htm
--> [
网站建设之]使用CSS选择器实现超链接带带图标样式
2.定义个性化样式当初我们来为各品种型的链接定义各自的样式，其实这个时候我们需要做的仅仅是定义不同的背景图片地位(background-position)：
这样，我们就为所有的链接定义了默认的样式了，所有的链接右侧都会显示一个红色的小箭头图标。
<a href="abc.doc">Word文档</a>
而我们在使用的时候，也不需要增加额定的class：
我们在设计网站的时候，有的时候需要依据页面元素的属性来制造不同的样式，比方，对于不同的链接类型，显示不同的链接图标。CSS的选择器是个很有用的技巧，通过它们，我们可以很容易的实现某些后果。今天我们通过制作个性化链接样式来先容一下CSS的属性选择器。
先看一下演示吧：
Tag：CSS 取舍器 超链接 CSS 挑选器 超链接
1.链接的基本样式首先我们筹备了一个CSS Sprites的图片，我们将所有的图标都整合到这一个a.gif中。
a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;
color:#369;
line-height:24px;
}
,使用CSS自动隐藏网页文字的技巧; 正如上图中看到的那样，我们为每种链接定义了不同的样式：当链接a的href属性的值为"mailto"邮件链接的时候，在该链接后面显示一个邮件的图标；当链接为word文件时，后面显示word文档图标,使用CSS定位页面的“footer”；当链接地址为mp3的时候，显示音乐播放图标,使用CSS定位的网页footer；当链接地址包含"qianduan.net"的时候，就显示一个首页图标……
,使用CSS如何实现自动换行和强制不换行; 实在实现这样的功效十分轻易，咱们先来看看CSS的属性抉择器的语法：
包含qianduan,使用CSS制作网页的15条常识.net字段的链接对包括某个字符串的链接，能够应用[att*=val]这种方法：
a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;color:#369;line-height:24px,使用CSS创建有图标的网站导航菜单;
}
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}
需要留神的是，CSS选择器无论CSS ２.１版本仍是CSS 3版本，IE7跟IE8都支持，webkit、Gecko中心及Opera也都支持，只有IE6以下阅读器才不支撑。
mailtomailto邮件链接是形如href=”mailto:abc@abc,使用CSS3实现鼠标悬停动画.com”的样式，它们的href属性的值以mailto开头，那么我们使用[att^=val]这种格式：
a[href^="mailto:"] {
background-position:right -242px;
} ,使用CSS+XHTML制作的下拉菜单(代码); word文档我们个别以为，所有的doc文件链接都是href=&rdquo,使用CSS 3新技术 完美实现圆角效果;abc.doc”这种格局,使用Combres合并对js、css文件的请求，也就是链接地址一.doc停止，那么我们须要使用[att$=val]这种格式。款式如下：
a[href$=".doc"] {
background-position:right -160px
}
好了，让我们来实现这些样式吧：
PDF、excle、mp3等格式的文档也是通过这种方式来实现的。
(责任编辑：网站建设)
使用CSS选择器实现超链接带带图标样式相关文章