CSS2.1定義了兩個只應用于超鏈接的偽類
:link 指示作為超鏈接(即有一個href屬性)并指向一個未訪問地址的所有錨。注意,有些瀏覽器可能會不 正確地將:link解釋為指向任何超鏈接,包括已訪問和未訪問的超鏈接:visited 指示作為已訪問地址超鏈接的所有錨css2.1定義了三個動態偽類,它們可以根據用戶行為改變文檔的外觀。這些動態偽類以前總用來設置超鏈接的樣式,不過它們還有很多其他用途
:focus 指示當前擁有輸入焦點的元素,也就是說可以接受鍵盤輸入或者能以某種方式激活的元素:hover 指示鼠標指針停留在哪個元素上,例如,鼠標指針可能停留在一個超鏈接上:active 指示被用戶輸入激活的元素,例如,鼠標指針停留在一個超鏈接上時,如果用戶點擊鼠標,就會激活這個超鏈接類似于:link和:visited,這些偽類最常用于超鏈接的上下文中,很多web頁面都有類似的樣式
a:link {color: navy;}a:visited {color: gray;}a:hover {color: red;}a:active {color: yellow;}a:hover 必須位于 a:link 和 a:visited 之后,這樣才能生效! a:active 必須位于 a:hover 之后,這樣才能生效! 鏈接無效會導致visited設置無效
偽類的順序很重要,通常的建議為link-visited-focus-hover-active
body *:hover {background: yellow;}從body元素繼承的所有元素在鼠標指針停留時會顯示一個黃色背景
還可以使用另一個靜態偽類:first-child來選擇元素的第一個子元素。
p:first-child {}選擇某元素第一個子元素的所有p元素
在有些情況下,可能想根據元素的語言來選擇,可以使用:lang()偽類。從對應的模式來講,:lang()偽類就像是|=屬性選擇器。例如要把所有法語元素變成斜體
*:lang(fr) {font-style:italic;}偽類選擇器和屬性選擇器之間的主要差別在于語言信息可以從很多來源得到,而且其中一些可能在元素之外。css2.1指出:
在html中,語言由lang屬性和meta元素的組合來確定,還可能包括協議提供的信息,如http首部。xml使用一個xml:lang屬性,另外可能還有其他文檔語言特定的方法來確定語言。因此偽類比屬性選擇器稍微健壯一些,在需要語言特定的樣式時,大多數情況下偽類都是更好地選擇。
在css2.1中,可以在同一個選擇器中結合使用偽類
a:link:hover {}a:visited:hover {}不要把互斥的偽類結合在一起使用
新聞熱點
疑難解答