我們在設計網站的時候，有的時候需要根據頁面元素的屬性來製作不同的樣式，例如，對於不同的連結類型，顯示不同的連結圖示。 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; } |
| 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 > |