CSS偽類(lèi)：修訂間差異

偽類(lèi)可以看做是一種特殊的類(lèi)選擇符，是能被支持CSS的瀏覽器自動(dòng)所識(shí)別的特殊選擇符。它的最大的用處就是可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果。

目錄

• 1 語(yǔ)法
• 2 偽類(lèi)列表
  • 2.1 : link
  • 2.2 :hover
  • 2.3 : active
  • 2.4 : visited
  • 2.5 :first-child
  • 2.6 : first
  • 2.7 : left/:right
  • 2.8 : lang
  • 2.9 : focus

語(yǔ)法

偽類(lèi)的語(yǔ)法是在原有的語(yǔ)法里加上一個(gè)偽類(lèi)（pseudo-class）：

selector:pseudo-class {property: value}

（選擇符:偽類(lèi) {屬性: 值}）

偽類(lèi)和類(lèi)不同，是CSS已經(jīng)定義好的，不能象類(lèi)選擇符一樣隨意用別的名字，根據(jù)上面的語(yǔ)法可以解釋為對(duì)象（選擇符）在某個(gè)特殊狀態(tài)下（偽類(lèi)）的樣式。

類(lèi)選擇符及其他選擇符也同樣可以和偽類(lèi)混用：

selector.class:pseudo-class {property: value}

（選擇符.類(lèi):偽類(lèi) {屬性: 值}）

偽類(lèi)列表

: link

語(yǔ)法：Selector : link { sRules }
說(shuō)明：
設(shè)置 a 對(duì)象在未被訪問(wèn)前的樣式。
默認(rèn)值由瀏覽器決定。
對(duì)于無(wú) href 屬性(特性)的 a 對(duì)象，此偽類(lèi)不發(fā)生作用。
請(qǐng)參閱 body 對(duì)象的 link 屬性(特性)和 document 對(duì)象的 linkColor 特性。
IE3將 :link 偽類(lèi)的樣式表屬性作用于 visited 偽類(lèi)。
示例：a:link { font-size: 14pt; text-decoration: underline; color: blue; }

:hover

語(yǔ)法：Selector : hover { sRules }
說(shuō)明：
設(shè)置對(duì)象在其鼠標(biāo)懸停時(shí)的樣式。
在CSS1中此偽類(lèi)僅可用于 a 對(duì)象。對(duì)于無(wú) href 屬性(特性)的 a 對(duì)象，此偽類(lèi)不發(fā)生作用。
在CSS2中此偽類(lèi)可以應(yīng)用于任何對(duì)象。
示例：
a:hover { font-size: 14pt; text-decoration: underline; color: blue; }
a:hover span{ color:red; }

: active

語(yǔ)法：Selector : active { sRules }
說(shuō)明：
設(shè)置對(duì)象在被用戶(hù)激活(在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件)時(shí)的樣式。
在CSS1中此偽類(lèi)僅可用于 a 對(duì)象。對(duì)于無(wú) href 屬性(特性)的 a 對(duì)象，此偽類(lèi)不發(fā)生作用。
在CSS2中此偽類(lèi)可以應(yīng)用于任何對(duì)象。
并且 :active 可以和 :link 以及 :visited 狀態(tài)同時(shí)發(fā)生。
示例：a:active { font-size: 14pt; text-decoration: underline; color: blue; }

: visited

語(yǔ)法：Selector : visited { sRules }
說(shuō)明：
設(shè)置 a 對(duì)象在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式。
IE3將 :link 偽類(lèi)的樣式表屬性作用于 :visited 偽類(lèi)。
默認(rèn)值由瀏覽器決定。定義網(wǎng)頁(yè)過(guò)期時(shí)間或用戶(hù)清空歷史記錄將影響此偽類(lèi)的作用。
對(duì)于無(wú) href 屬性(特性)的 a 對(duì)象，此偽類(lèi)不發(fā)生作用。
請(qǐng)參閱 body 對(duì)象的 vlink 屬性(特性)和 document 對(duì)象的 vlinkColor 特性。
示例：a:visited { font-size: 14pt; text-decoration: underline; color: blue; }

:first-child

語(yǔ)法：Selector : first-child { sRules }
說(shuō)明：設(shè)置 E 的第一個(gè)子對(duì)象的樣式。
示例：
p a:first-child { color: green }
table td:first-child { width:200px; }

: first

語(yǔ)法：Selector : first { sRules }
說(shuō)明：設(shè)置頁(yè)面容器第一頁(yè)使用的樣式。僅用于 @page 規(guī)則。
示例：@page :first { margin: 4cm }

: left/:right

語(yǔ)法：Selector : left { sRules }/Selector : right { sRules }
說(shuō)明：設(shè)置頁(yè)面容器位于裝訂線(xiàn)左邊的所有頁(yè)面使用的樣式。僅用于 @page 規(guī)則。
示例：@page :left { margin: 4cm }

: lang

語(yǔ)法：Selector : lang { sRules }
說(shuō)明：設(shè)置對(duì)象使用特殊語(yǔ)言的內(nèi)容的樣式。
示例：blockquote:lang(fr) { quotes: '?' ' ?' } /* 使用法語(yǔ)顯示由quotes屬性指定的法語(yǔ)的嵌套標(biāo)記 */

: focus

語(yǔ)法：Selector : focus { sRules }
說(shuō)明：設(shè)置對(duì)象在成為輸入焦點(diǎn)(該對(duì)象的 onfocus 事件發(fā)生)時(shí)的樣式。
示例：
a:focus { font-size: 14pt; text-decoration: underline; color: blue; }
a:focus img { border: thin solid green }