CSS2.1定義了3個(gè)動(dòng)態(tài)偽類(lèi),它們可以根據用戶(hù)行為改變文檔的外觀(guān)。這些動(dòng)態(tài)偽類(lèi)以前在制作網(wǎng)站時(shí)總用來(lái)設置超鏈接的樣式,不過(guò)它們還有很多其他用途。
:focus
指示當前擁有輸入焦點(diǎn)的元素,也就是說(shuō),可以接受鍵盤(pán)輸入或者能以某種方式激活的元素
:hover
指示鼠標指針停留在哪個(gè)元素上,例如,鼠標指針可能停留在一個(gè)超鏈接上,:hover就會(huì )指示這個(gè)超鏈接
:active
指示被用戶(hù)輸入激活的元素,例如,鼠標指針停留在一個(gè)超鏈接上時(shí),如果用戶(hù)點(diǎn)擊鼠標,就會(huì )激活這個(gè)超鏈接,將指示這個(gè)超鏈接
類(lèi)似于:link和:visited,這些偽類(lèi)最常用于超鏈接的上下文中。很多網(wǎng)頁(yè)頁(yè)面都有類(lèi)似的樣式:
a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}
前兩個(gè)規則使用了靜態(tài)偽類(lèi),后兩個(gè)利用了動(dòng)態(tài)偽類(lèi)。:active類(lèi)似于HTML 3.2中的alink屬性,不過(guò),如前所述,對激活鏈接不僅能改變顏色,還可以應用你喜歡的任何樣式。
注意:偽類(lèi)的順序很重要,這一點(diǎn)最初可能不太明顯。通常的建議是“l(fā)ink-visited-hover-active”,不過(guò)現在已經(jīng)改為“l(fā)ink-visited-focus-hover-active”。下一章將解釋為什么這種順序很重要,并討論在哪些情況下可能要改變甚至忽略這個(gè)推薦順序。
注意,動(dòng)態(tài)偽類(lèi)可以應用到任何元素,這一點(diǎn)很好,因為對非鏈接的元素應用動(dòng)態(tài)樣式通常很有用。例如,使用以下標記:
input:focus {background: silver; font-weight: bold;}
可以突出顯示一個(gè)準備接受鍵盤(pán)輸入的表單元素。
向任意元素應用動(dòng)態(tài)偽類(lèi)還可以做一些有點(diǎn)奇怪的事情。你可能想通過(guò)以下規則為用戶(hù)提供一種“強調”的效果:
body*:hover {background: yellow;}
根據這個(gè)規則,從body元素繼承的所有元素(即包含在body下的元素)在鼠標指針停留時(shí)(處于懸停狀態(tài)時(shí))會(huì )顯示一個(gè)黃色背景。標題。段落、列表、表、圖像和body中的所有元素都會(huì )改為有黃色背景。另外還可以改變字體,在鼠標停留的元素外加一個(gè)邊框,或者改變?yōu)g覽器允許的所有其他方面。
警告:Windows平臺的Internet Explorer在IE6之前只允許動(dòng)態(tài)偽類(lèi)選擇超鏈接,而不允許選擇其他元素。IE7支持對所有元素都能應用:hover,但是不支持對表單元素應用:focus樣式。
動(dòng)態(tài)樣式的實(shí)際問(wèn)題
動(dòng)態(tài)偽類(lèi)帶來(lái)了一些有意思的怪問(wèn)題。例如,可以將已訪(fǎng)問(wèn)和未訪(fǎng)問(wèn)的鏈接設置為一種字體大小,而讓鼠標停留的鏈接有更大的字體,如圖2-23所示:
a:link, a:visited {font-size: 13px;}
a:hover {font-size: 20px;}
可以看到,鼠標指針停留在錨上時(shí)用戶(hù)代理增加了錨的大小。支持這種行為的用戶(hù)代理在錨處于懸停狀態(tài)時(shí)必須重繪文檔,這就要求重新顯示該鏈接之后的所有內容。
不過(guò),CSS規范指出,文檔第一次顯示之后,用戶(hù)代理不必重繪文檔,所以你不能完全依賴(lài)預想的效果,也就是說(shuō),不要指望你預想的效果肯定會(huì )發(fā)生。強烈建議要避免依賴(lài)于這種行為的設計。
a:link, a:visited {font-size: 13px;}
當前文章標題:什么是動(dòng)態(tài)偽類(lèi)
當前URL:http://amzcoolest.com/news/wzzz/what-dynamic-pseudo-classes.html
上一篇:什么是鏈接偽類(lèi)