CSS偽類常識——動態鏈接_動易Cms教程

　　偽類可以看做是一種非凡的類選擇符，是能被支持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}
現在應用在不同的鏈接上：
這是第一組
這是第二組

4、其他偽類

此外CSS2還定義了首字和首行（first-letter和first-line）的偽類，可以對元素的首字或首行設定不同的樣式。 注重：首字和首行的偽類需要IE5.5以上的版本支持。

來自http://www.ddvip.net/web/html/index2.asp

查看更多 動易Cms教程  動易Cms模板