我們要達到的效果是,給所有指向非本站的鏈接都加上一個小圖標以告訴用戶點擊這個鏈接會讓你離開本站,這是一個外部鏈接。當然這可能通過比較複雜的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