CSS, CSS3, 網頁設計

CSS教學-CSS3選擇符設定連結樣式

梅干2012/11/12
梅問題-CSS3教學-利用CSS3選擇符設定連結樣式
  用過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>

[範例預覽] [範例下載]
UAG軍規iPhone防摔殼