利用CSS属性选择器控制链接样式

有时我们可能希望内部链接与外部链接显示不同的样式,如我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开。

有许多人使用JavaScript或者jQuery自动添加文件类型的图标,当然利用CSS2.1也可以很容易做到,CSS2中引入了属性选择器,它可以根据元素的属性及属性值来选择元素。
但是注意的是IE6以上的版本和FF 才支持。

演示: Add-Icons-next-to-your-links-with-CSS.html

那,诀窍是使用属性选择器a[href^=”http://”]

标签名[标签的属性 / 标签的属性=”属性值”]{参数}

例子1:
给所有
<a>标签的href属性值是“http://”开头的文字超链接,都在右边加上图标。

Css Code:

1
2
3
4
5
a[href^="http://"] {
background:transparent url(../images/external.png) center right no-repeat;
display:inline-block;
padding-right:15px;
}

Html Code:

例子2:

所有以 .zip .rar .gzip扩展名结束的,将会显示一个相同的图标在旁边

CSS:

1
2
3
4
5
6
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
background:transparent url(../images/zip.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:18px;
}

HtmlCode:

1
2
3
<a href="demo1.zip">Zip document links </a>
<a href="demo1.rar">Rar document links </a>
<a href="demo1.gzip">Gzip document links </a>

一个综合的例子:

Css Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* PDF document links */
a[href$='.pdf'] {
background:transparent url(../images/pdf.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:15px;
}
 
 
/* Excel Documents links */
a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] {
background:transparent url(../images/excel.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:15px;
}
 
/* Word Document Links */
a[href$='.doc'], a[href$='.rtf'], a[href$='.wps'], a[href$='.txt'] {
background:transparent url(../images/word.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:15px;
}
 
/* mailto: links */
a[href^="mailto:"] {
background:transparent url(../images/mailto.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:15px;
}

Html Code:

1
2
3
4
<a href="demo1.pdf">PDF document links </a>
<a href="demo1.xls">Excel Documents links</a>
<a href="demo1.doc">Word Document Links </a>
<a href="mailto:blog.moocss.com@gmail.com">RainBow-Email</a>

站点统计