教你用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
 
定義鏈接的樣式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...查看完整版>>定義鏈接的樣式CSS
 
CSS控制頁面樣式的4種方式和優先級-css設計
本節主要講解,兩個內容,第一:CSS如何控制頁面樣式,有幾種方式;第二:這些方式出現在同一個頁面時的優先級。使用xHTML+CSS布局頁面,其中有個很重要的特點就是內容與表象相分離,內容指HTML頁面代碼,表象就是CS...查看完整版>>CSS控制頁面樣式的4種方式和優先級-css設計
 
用CSS層疊樣式表完成可以控制的閃爍效果
  一段文本或一張圖片,它的周圍有一圈光暈,這圈光暈每一秒鍾閃爍一次,而當鼠標移到上面時,立即停止閃爍,當鼠標移開時又繼續閃爍。這種效果用于那些需要特別引起別人注意的內容上(如:警示、報告新增內容等),能...查看完整版>>用CSS層疊樣式表完成可以控制的閃爍效果
 
如何用CSS層疊樣式表控制鼠標顯示的樣式
  一般而言,鼠標以斜向上的箭頭顯示,移到文本上時變爲有頭的豎線,移到超級鏈接上變爲手型。但用css可控制鼠標的顯示效果,如可使鼠標移到普通文本上也顯示成手型。  用css控制的語法如下:  <span style=...查看完整版>>如何用CSS層疊樣式表控制鼠標顯示的樣式
 
 
回到王朝網路移動版首頁