我們?cè)谠O(shè)計(jì)網(wǎng)站的時(shí)候，有的時(shí)候需要根據(jù)頁(yè)面元素的屬性來(lái)制作不同的樣式，比如，對(duì)于不同的鏈接類(lèi)型，顯示不同的鏈接圖標(biāo)。CSS的選擇器是個(gè)很有用的技術(shù)，通過(guò)它們，我們可以很容易的實(shí)現(xiàn)某些效果。今天我們通過(guò)制作個(gè)性化鏈接樣式來(lái)介紹一下CSS的屬性選擇器。
先看一下演示吧：
正如上圖中看到的那樣，我們?yōu)槊糠N鏈接定義了不同的樣式：當(dāng)鏈接a的href屬性的值為"mailto"郵件鏈接的時(shí)候，在該鏈接后面顯示一個(gè)郵件的圖標(biāo)；當(dāng)鏈接為word文件時(shí)，后面顯示word文檔圖標(biāo)；當(dāng)鏈接地址為mp3的時(shí)候，顯示音樂(lè)播放圖標(biāo)；當(dāng)鏈接地址包含"qianduan.net"的時(shí)候，就顯示一個(gè)首頁(yè)圖標(biāo)……
其實(shí)實(shí)現(xiàn)這樣的功能非常容易，我們先來(lái)看看CSS的屬性選擇器的語(yǔ)法：
| 語(yǔ)法 | 用法 | css版本 |
|---|---|---|
| [att=val] | 屬性"att"值為"val"的元素 | css 2.1 |
| [att] | 包含"att"屬性的元素 | css 2.1 |
| [att|=val] | 匹配所有att屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以“val”開(kāi)頭的E元素，主要用于lang屬性，比如“en”、“en-us”、“en-gb” | css 2.1 |
| [att~=val] | 匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“val”的E元素 | css 2.1 |
| [ns|attr] | 名字空間下的"attr"屬性的元素，不常用 | css 3 |
| [att^=val] | 屬性att的值以"val"開(kāi)頭的元素 | css 3 |
| [att*=val] | 屬性att的值包含"val"字符串的元素 | css 3 |
| [att$=val] | 屬性att的值以"val"結(jié)尾的元素 | css 3 |
需要注意的是，CSS選擇器無(wú)論CSS ２.１版本還是CSS 3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下瀏覽器才不支持。
上一篇 奧運(yùn)會(huì)黃金時(shí)間 站長(zhǎng)也要好好利用時(shí)機(jī)哦
下一篇 長(zhǎng)期使用中型Access數(shù)據(jù)庫(kù)的一點(diǎn)經(jīng)驗(yàn)
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
