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

梅干 2012/11/12 1 分鐘閱讀

　　用過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>

[範例預覽]　[範例下載]

標籤

熱門關鍵字:

最新文章

Switch《寶可夢 Z-A》好啦魷怎麼進化？翻轉螢幕即可進化成烏賊王

Switch《寶可夢 Z-A》好啦魷怎麼進化？翻轉螢幕即可進化成烏賊王

Cloudflare Drop 拖曳就能部署網站，還可綁定網域與SSL

Cloudflare Drop 拖曳就能部署網站，還可綁定網域與SSL

你可能也會喜歡