我們在設計網站的時候，有的時候需要根據頁面元素的屬性來制作不同的樣式，比如，對于不同的鏈接類型，顯示不同的鏈接圖標。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以下瀏覽器才不支持。
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
