用過jQuery的朋友,應該對於jQuery的選擇器不感陌生,透過選擇器,可針對網頁的元素,加入特效與變化,但現在CSS3也有類似的功能啦!透過CSS3的選擇器,可針對網頁標籤中的檔案類型各別設定,例如最常看到的就是,像是檔案下載,若有png、pdf、zip..等檔案時,這時若希望不同檔案給與不同的連結圖示時,就得在a標籤個別定義class名稱,但現在透過CSS3的選擇器後,就可依照連結的檔案類型,設定不同的連結圖示,現在就一塊來看看,CSS3所帶來的便利性吧!
CSS3屬性選擇器:
適用瀏覽器:IE9.0+、Chrome21.0+、FireFox13.0+、Safari5.0+、Oprea11.0+
實用性:★★★★
實用性:★★★★
CSS3屬性選擇器說明:
在選擇器的部分,大至可區分成以下三種:
[^=]:屬性的起始值
[$=]:屬性的結尾值
[*=]:屬性包含值
[$=]:屬性的結尾值
[*=]:屬性包含值
CSS3屬性選擇器範例:
這邊梅干以a標籤為例,比方有三個不同的連結檔案,並透過三種不同的選擇器,來設定個別連結的檔案圖示。
#CSS3 style部分:
a[href$=“pdf”] { background:url(pdf.png)#efefef no-repeat;
line-height:128px; padding-left:150px; } a[href^=“photo”] { background:url(png.png)#efefef no-repeat; line-height:128px;
padding-left:150px; }a[href*=“file”] { background:url(zip.png)#efefef no-repeat;
line-height:128px; padding-left:150px; }
#CSS3 html部分:
<a href=“minwt.pdf”>PDF</a> <a href=“photo.png”>PNG</a> <a href=“file.zip”>ZIP</a>
[範例預覽] [範例下載]