我們要達到的效果是,給所有指向非本站的連結都加上一個小圖示以告訴用戶點擊這個連結會讓你離開本站,這是一個外部連結。當然這可能透過比較複雜的JavaScript來實現,但我們現在可以透過CSS 3的屬性選擇符來實現這個功能。
a[href^=”http:”] {
background:url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}
上面這段程式碼的意思是:所有以http:開頭的鏈接都會加上一個小箭頭的圖標,提示用戶這是一個外部鏈接,用戶點擊會離開本站。可以說,這個功能是非常人性化,突顯了Web設計的易用性。
當然,這是針對指向本站的連結都使用了相對地址的。如果指向本站的連結也是以http:開頭的,或是有使用既有使用絕對位址又有使用相對位址的呢?我們可以使用以下程式碼:
a[href^=”http:”] {
background:url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}
a [href*=”www.dudo.org”] {
background:none;
padding:0;
}
上面這兩條規則是:所有以http:開頭的均加上外部連結的圖標,後面緊接著以http://www.dudo.org/開頭的都不使用,自然相對地址因為不是以http開頭所有不會出現箭頭圖示。
文章來源: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm