我們在設計網站的時候，有的時候需要根據頁面元素的屬性來製作不同的樣式，比如，對於不同的鏈接類型，顯示不同的鏈接圖標。 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中。
| a { background:url(a.gif) no-repeat right 4px; padding-right:18px; color:#369; line-height:24px; } |
這樣，我們就為所有的鏈接定義了默認的樣式了，所有的鏈接右側都會顯示一個紅色的小箭頭圖標。
2.定義個性化樣式現在我們來為各種類型的鏈接定義各自的樣式，其實這個時候我們需要做的僅僅是定義不同的背景圖片位置(background-position)：
mailtomailto郵件鏈接是形如href=”mailto:[email protected]”的樣式，它們的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 { 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> |