教你用CSS屬性選擇器控制鏈接樣式

有時我們可能希望內部鏈接與外部鏈接顯示不同的樣式,如外部鏈接。我想在鏈接的旁邊加上一個小圖標,以表示其是一個外部的鏈接,來告訴來訪者,讓他們來確認是在新窗口打開還是在本窗口打開。我們可能會這樣做:

.external

{

background:url(images/external.gif) no-repeat right top;

padding-right:12px;

}

然後給每一個外部的鏈接應用該CSS,當然,這樣做並不是不可以,只是太繁瑣。

那有沒有好的辦法來實現呢?有。可以利用CSS3中的屬性選擇,但是在IE6及以下版本不支持該方法,在FireFox中已經實現了。

a[href^="http://www.devdao.com"]

{

background-image:none;

padding-right:0px;

}

會查找所有以http://www.devdao.com開頭的鏈接,並且排除背景圖片。有了上面的屬性,就好辦了。

<style type="text/css">

a

{

background:url(external.gif) no-repeat right top;

padding-right:14px;

font-size:12px;

}

a[href^="http://www.devdao.com"]

{

background-image:none;

padding-right:0px;

}

</style>

給所有鏈接加上圖標,然後去掉以http://www.devdao.com開頭的鏈接圖標,這樣就實現了外部鏈接顯示圖標,內部鏈接不顯示圖標了。

 
教你用CSS屬性選擇器控制鏈接樣式
有時我們可能希望內部鏈接與外部鏈接顯示不同的樣式,如外部鏈接。我想在鏈接的旁邊加上一個小圖標,以表示其是一個外部的鏈接,來告訴來訪者,讓他們來確認是在新窗口打開還是在本窗口打開。我們可能會這樣做:.ext...查看完整版>>教你用CSS屬性選擇器控制鏈接樣式
 
CSS樣式控制圖片裁切顯示
  我們在論壇新聞系統的時候,其中的有些圖片會比較大破壞了整體布局的美觀,現通過CSS定義方式使圖片進行裁切顯示,即,當圖片的容器不足以顯示整個圖片時,會以左上角爲開始顯示,不足顯示的將會隱藏。相關各位同...查看完整版>>CSS樣式控制圖片裁切顯示
 
CSS樣式控制圖片裁切顯示
我們在論壇新聞系統的時候,其中的有些圖片會比較大破壞了整體布局的美觀,現通過CSS定義方式使圖片進行裁切顯示,即,當圖片的容器不足以顯示整個圖片時,會以左上角爲開始顯示,不足顯示的將會隱藏。相關各位同仁也...查看完整版>>CSS樣式控制圖片裁切顯示
 
用css樣式控制超鏈接顔色顯示
很多人在網頁上實現不同鏈接有不同的顔色上不知如何處理,如果改a的屬性,好像所有的鏈接的顔色都改了。事實上,采用css樣式實現這個效果比較簡單。先看一下常用設置:a:link 超鏈接的普通樣式a:visited 點擊過的a:h...查看完整版>>用css樣式控制超鏈接顔色顯示
 
定義鏈接的樣式CSS
CSS中用四個僞類來定義鏈接的樣式,分別是:a:link、a:visited、a:hover和a : active,例如:a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}a:visited {font-weight : bold ;text-decoration ...查看完整版>>定義鏈接的樣式CSS