網頁制作poluoluo文章簡介：今天我們通過制作個性化鏈接樣式來介紹一下CSS的屬性選擇器。
我們在設計網站的時候，有的時候需要根據頁面元素的屬性來制作不同的樣式，比如，對於不同的鏈接類型，顯示不同的鏈接圖標。CSS的選擇器是個很有用的技術，通過它們，我們可以很容易的實現某些效果。今天我們通過制作個性化鏈接樣式來介紹一下CSS的屬性選擇器。
先看一下演示吧：
正如上圖中看到的那樣，我們為每種鏈接定義了不同的樣式：當鏈接a的href屬性的值為"mailto"郵件鏈接的時候，在該鏈接後面顯示一個郵件的圖標；當鏈接為word文件時，後面顯示word文檔圖標；當鏈接地址為mp3的時候，顯示音樂播放圖標；當鏈接地址包含"qianduan.net"的時候，就顯示一個首頁圖標……
其實實現這樣的功能非常容易，我們先來看看CSS的屬性選擇器的語法：
需要注意的是，CSS選擇器無論CSS ２.１版本還是CSS 3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏覽器才不支持。
好了，讓我們來實現這些樣式吧：
1.鏈接的基礎樣式
首先我們准備了一個CSS Sprites的圖片，我們將所有的圖標都整合到這一個a.gif中。
1 2 3 4 5 6
a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;
color:#369;
line-height:24px;
}
這樣，我們就為所有的鏈接定義了默認的樣式了，所有的鏈接右側都會顯示一個紅色的小箭頭圖標。
2.定義個性化樣式
現在我們來為各種類型的鏈接定義各自的樣式，其實這個時候我們需要做的僅僅是定義不同的背景圖片位置(background-position)：
mailto
mailto郵件鏈接是形如href=”mailto:[email protected]”的樣式，它們的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
}
最後讓我們看看完整的樣式吧：
1 2 3 4 5 6 7 8 9 10 11 12
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：
1
<a href="abc.doc">Word文檔</a>
僅此而已。