偽類——動態(tài)鏈接

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

1. 語法

偽類的語法是在原有的語法里加上一個偽類（pseudo-class）： selector:pseudo-class {property: value} （選擇符:偽類 {屬性: 值}） 偽類和類不同，是CSS已經(jīng)定義好的，不能象類選擇符一樣隨意用別的名字，根據(jù)上面的語法可以解釋為對象（選擇符）在某個特殊狀態(tài)下（偽類）的樣式。

類選擇符及其他選擇符也同樣可以和偽類混用： selector.class:pseudo-class {property: value} （選擇符.類:偽類 {屬性: 值}）

2. 錨的偽類

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

a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */ a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */ a:hover {color: #FF00FF; text-decoration: underline} /* 鼠標(biāo)在鏈接上 */ a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */

（上面這個例子中，這個鏈接未訪問時的顏色是紅色并無下劃線，訪問后是綠色并無下劃線，激活鏈接時為藍(lán)色并有下劃線，鼠標(biāo)在鏈接上時為紫色并有下劃線） 注意：有時這個鏈接訪問前鼠標(biāo)指向鏈接時有效果，而鏈接訪問后鼠標(biāo)再次指向鏈接時卻無效果了。這是因?yàn)槟惆補(bǔ):hover放在了a:visited的前面，這樣的話由于后面的優(yōu)先級高，當(dāng)訪問鏈接后就忽略了a:hover的效果。所以根據(jù)疊層順序，我們在定義這些鏈接樣式時，一定要按照a:link， a:visited， a:hover， a:actived的順序書寫。

3. 偽類和類選擇符

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

a.red:link {color: #FF0000} a.red:visited {color: #0000FF} a.blue:link {color: #00FF00} a.blue:visited {color: #FF00FF}

現(xiàn)在應(yīng)用在不同的鏈接上：

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

4. 其他偽類

此外CSS2還定義了[u]首字[/u]和[u]首行[/u]（first-letter和first-line）的偽類，可以對元素的首字或首行設(shè)定不同的樣式。 下面看這個例子，我們在段落標(biāo)記里定義文本首字尺寸為默認(rèn)大小的3倍：

<style type=”text/css”> p:first-letter {font-size: 300%} </style> …… <p> 這是一個段落，這個段落的首字被放大了。 </p>

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

<style type=”text/css”> div:first-line {color: red} </style> …… <div> <p> 這是段落的第一行 這是段落的第二行 這是段落的第三行 </p> </div>

（上例中段落的第一行為紅色，第二、三行為默認(rèn)顏色）

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

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章題目：偽類——動態(tài)鏈接
轉(zhuǎn)載來源：http://aaarwkj.com/news30/312030.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)