武林網(www.companysz.com)文章簡介：今天我們通過制作個性化鏈接樣式來介紹一下CSS的屬性選擇器。

我們在設計網站的時候，有的時候需要根據頁面元素的屬性來制作不同的樣式，比如，對于不同的鏈接類型，顯示不同的鏈接圖標。CSS的選擇器是個很有用的技術，通過它們，我們可以很容易的實現某些效果。今天我們通過制作個性化鏈接樣式來介紹一下CSS的屬性選擇器。

先看一下演示吧：

正如上圖中看到的那樣，我們為每種鏈接定義了不同的樣式：當鏈接a的href屬性的值為"mailto"郵件鏈接的時候，在該鏈接后面顯示一個郵件的圖標；當鏈接為word文件時，后面顯示word文檔圖標；當鏈接地址為mp3的時候，顯示音樂播放圖標；當鏈接地址包含"qianduan.net"的時候，就顯示一個首頁圖標……

其實實現這樣的功能非常容易，我們先來看看CSS的屬性選擇器的語法：

語法用法css版本

[att=val]屬性"att"值為"val"的元素css 2.1

[att]包含"att"屬性的元素css 2.1

[att|=val]匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“val”開頭的E元素，主要用于lang屬性，比如“en”、“en-us”、“en-gb”css 2.1

[att~=val]匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素css 2.1

[ns|attr] 名字空間下的"attr"屬性的元素，不常用css 3

[att^=val] 屬性att的值以"val"開頭的元素css 3

[att*=val] 屬性att的值包含"val"字符串的元素css 3

[att$=val]屬性att的值以"val"結尾的元素css 3

需要注意的是，CSS選擇器無論CSS ２.１版本還是CSS 3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下瀏覽器才不支持。

好了，讓我們來實現這些樣式吧：

首先我們準備了一個CSS Sprites的圖片，我們將所有的圖標都整合到這一個a.gif中。

123456a

這樣，我們就為所有的鏈接定義了默認的樣式了，所有的鏈接右側都會顯示一個紅色的小箭頭圖標。

現在我們來為各種類型的鏈接定義各自的樣式，其實這個時候我們需要做的僅僅是定義不同的背景圖片位置(background-position)：

mailto郵件鏈接是形如href=”mailto:[email protected]”的樣式，它們的href屬性的值以mailto開頭，那么我們使用[att^=val]這種格式：

123a

我們一般認為，所有的doc文件鏈接都是href=”abc.doc”這種格式，也就是鏈接地址一.doc結束，那么我們需要使用[att$=val]這種格式。樣式如下：

123a

PDF、excle、mp3等格式的文檔也是通過這種方法來實現的。

對于包含某個字符串的鏈接，可以使用[att*=val]這種方式：

123a

最后讓我們看看完整的樣式吧：

123456789101112a colorline-aaaaaaaa

而我們在使用的時候，也不需要添加額外的class：

1>Word文檔</a>

僅此而已。