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)再次指向鏈接時卻無效果了。這是因為你把a(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)用在不同的鏈接上:
這是第一組
這是第二組
4、其他偽類
此外CSS2還定義了首字和首行(first-letter和first-line)的偽類,可以對元素的首字或首行設(shè)定不同的樣式。 注重:首字和首行的偽類需要IE5.5以上的版本支持。
來自http://www.ddvip.net/web/html/index2.asp
新聞熱點(diǎn)
疑難解答
圖片精選