什么是動態(tài)偽類

CSS2.1定義了3個動態(tài)偽類,它們可以根據用戶行為改變文檔的外觀。這些動態(tài)偽類以前在制作網站時總用來設置超鏈接的樣式,不過它們還有很多其他用途。

:focus

指示當前擁有輸入焦點的元素,也就是說,可以接受鍵盤輸入或者能以某種方式激活的元素

:hover

指示鼠標指針停留在哪個元素上,例如,鼠標指針可能停留在一個超鏈接上,:hover就會指示這個超鏈接

:active

指示被用戶輸入激活的元素,例如,鼠標指針停留在一個超鏈接上時,如果用戶點擊鼠標,就會激活這個超鏈接,將指示這個超鏈接

類似于:link和:visited,這些偽類最常用于超鏈接的上下文中。很多網頁頁面都有類似的樣式:

a:link {color: navy;}

a:visited {color: gray;}

a:hover {color: red;}

a:active {color: yellow;}

前兩個規(guī)則使用了靜態(tài)偽類,后兩個利用了動態(tài)偽類。:active類似于HTML 3.2中的alink屬性,不過,如前所述,對激活鏈接不僅能改變顏色,還可以應用你喜歡的任何樣式。

注意:偽類的順序很重要,這一點最初可能不太明顯。通常的建議是“l(fā)ink-visited-hover-active”,不過現在已經改為“l(fā)ink-visited-focus-hover-active”。下一章將解釋為什么這種順序很重要,并討論在哪些情況下可能要改變甚至忽略這個推薦順序。

注意,動態(tài)偽類可以應用到任何元素,這一點很好,因為對非鏈接的元素應用動態(tài)樣式通常很有用。例如,使用以下標記:

input:focus {background: silver; font-weight: bold;}

可以突出顯示一個準備接受鍵盤輸入的表單元素。

向任意元素應用動態(tài)偽類還可以做一些有點奇怪的事情。你可能想通過以下規(guī)則為用戶提供一種“強調”的效果:

body*:hover {background: yellow;}

根據這個規(guī)則,從body元素繼承的所有元素(即包含在body下的元素)在鼠標指針停留時(處于懸停狀態(tài)時)會顯示一個黃色背景。標題。段落、列表、表、圖像和body中的所有元素都會改為有黃色背景。另外還可以改變字體,在鼠標停留的元素外加一個邊框,或者改變?yōu)g覽器允許的所有其他方面。

警告:Windows平臺的Internet Explorer在IE6之前只允許動態(tài)偽類選擇超鏈接,而不允許選擇其他元素。IE7支持對所有元素都能應用:hover,但是不支持對表單元素應用:focus樣式。

動態(tài)樣式的實際問題

動態(tài)偽類帶來了一些有意思的怪問題。例如,可以將已訪問和未訪問的鏈接設置為一種字體大小,而讓鼠標停留的鏈接有更大的字體,如圖2-23所示:

a:link, a:visited {font-size: 13px;}

a:hover {font-size: 20px;}

使用動態(tài)偽類改變布局

可以看到,鼠標指針停留在錨上時用戶代理增加了錨的大小。支持這種行為的用戶代理在錨處于懸停狀態(tài)時必須重繪文檔,這就要求重新顯示該鏈接之后的所有內容。

不過,CSS規(guī)范指出,文檔第一次顯示之后,用戶代理不必重繪文檔,所以你不能完全依賴預想的效果,也就是說,不要指望你預想的效果肯定會發(fā)生。強烈建議要避免依賴于這種行為的設計。

a:link, a:visited {font-size: 13px;}