當前位置:首頁 >> 站長天地 >> 網頁制作 >> 內容

詳細講解CSS特殊選擇符偽類的應用技巧

時間:2008-10-6 10:40:00 欄目:網頁制作 點擊: 來源:不詳

 [網頁制作]-本文簡要:偽類可以看做是一種特殊的類選擇符,是能被支持CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈接在不同狀態下定義不同的樣式效果。1. 語法偽類的語法是在原有的語法里加上一個偽類(pseudo-class):selector:pseudo-class {property: value}(...
D6電腦網 (d6pc.com): 詳細講解CSS特殊選擇符偽類的應用技巧-網頁制作

偽類可以看做是一種特殊的類選擇符,是能被支持CSS瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈接在不同狀態下定義不同的樣式效果。

1. 語法

偽類的語法是在原有的語法里加上一個偽類(pseudo-class):

selector:pseudo-class {property: value}

(選擇符:偽類 {屬性: 值})

偽類和類不同,是CSS已經定義好的,不能象類選擇符一樣隨意用別的名字,根據上面的語法可以解釋為對象(選擇符)在某個特殊狀態下(偽類)的樣式。

類選擇符及其他選擇符也同樣可以和偽類混用:

selector.class:pseudo-class {property: value}

(選擇符.類:偽類 {屬性: 值})

2. 錨的偽類

我們最常用的是4種a(錨)元素的偽類,它表示動態鏈接在4種不同的狀態:link、visited、active、hover(未訪問的鏈接、已訪問的鏈接、激活鏈接和鼠標停留在鏈接上)。我們把它們分別定義不同的效果:

a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */

a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */

a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標在鏈接上 */

a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */

(上面這個例子中,這個鏈接未訪問時的顏色是紅色并無下劃線,訪問后是綠色并無下劃線,激活鏈接時為藍色并有下劃線,鼠標在鏈接上時為紫色并有下劃線)

注意:有時這個鏈接訪問前鼠標指向鏈接時有效果,而鏈接訪問后鼠標再次指向鏈接時卻無效果了。這是因為你把a:hover放在了a:visited的前面,這樣的話由于后面的優先級高,當訪問鏈接后就忽略了a:hover的效果。所以根據疊層順序,我們在定義這些鏈接樣式時,一定要按照a:link, a:visited, a:hover, a:actived的順序書寫。

3. 偽類和類選擇符

將偽類和類組合起來用,就可以在同一個頁面中做幾組不同的鏈接效果了,例如,我們定義一組鏈接為紅色,訪問后為藍色;另一組為綠色,訪問后為黃色:

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

現在應用在不同的鏈接上:

<a class="red" href="...">這是第一組鏈接</a>

<a class="blue" href="...">這是第二組鏈接</a>

4. 其他偽類

此外CSS2還定義了首字和首行(first-letter和first-line)的偽類,可以對元素的首字或首行設定不同的樣式。

下面看這個例子,我們在段落標記里定義文本首字尺寸為默認大小的3倍:

<style type=”text/css”>

p:first-letter {font-size: 300%}

</style>

……

<p>

這是一個段落,這個段落的首字被放大了。

</p>

我們再定義一個首行樣式的例子:

<style type=”text/css”>

div p:first-line {color: red}

</style>

……

<div>

<p>

這是段落的第一行

這是段落的第二行

這是段落的第三行

</p>

</div>

(上例中段落的第一行為紅色,第二、三行為默認顏色)

注意:首字和首行的偽類需要IE5.5以上的版本支持。


Tags:講解 技巧 


D6電腦網|電腦學習,電腦維修,電腦技術網;
設電腦學習,電腦入門,電腦技術,電腦教程,電腦維修,硬件知識,
網頁設計建站,桌面壁紙,主題下載,WIN7下載,常用軟件下載等欄目。感謝您的支持!
欄目:網頁制作 作者:佚名 來源:不詳
共有評論 0相關評論
發表我的評論
  • 大名:
  • 內容:
本類推薦
  • 沒有
本類固頂
  • 沒有
網友推薦
鏈接申請
  • D6電腦網(www.kyvctc.live) © 2019 版權所有 All Rights Reserved.
  • 本站為純技術學習交流型網站,部分資源來源網絡,僅供學習交流,版權歸原作者,本站僅為轉載,如有侵犯您的利益請聯系我們刪除.謝謝!
    關于D6電腦學習網 廣告合作 [email protected] 聯系站長 網站地圖 粵ICP備09035016號
  • 擺脫淺薄和低俗的最好辦法就是學習,我們加油!D6PC! V3.0
  • 狂野大中华救援彩金 金鼎娱乐 股票下跌散户怎么赚钱 剑灵加什么工会赚钱 3d试机号和开机号的关系 号码走势图新疆18选7 3d玩法介绍 南宁体育彩票投注点 万发彩票首页 高频彩图片 ls语音.真的能赚钱吗 山西扣点点手机版官网 36选7开奖中几个有奖 体彩11选5开奖结果 kol经纪人赚钱么 博士网上娱乐 上海快三开奖结果查询