CSS 系列之僞類與僞元素

僞類

CSS 僞類用於向某些選擇器添加特殊的效果。

• 錨僞類
• 表單僞類
• 結構化僞類

錨僞類

• :link
• :visited
• :hover
• :active

a:link {color: #FF0000}        /* 未訪問的連接 */
a:visited {color: #00FF00}    /* 已訪問的連接 */
a:hover {color: #FF00FF}    /* 鼠標移動到連接上 */
a:active {color: #0000FF}    /* 選定的連接 */

表單僞類

• :checked
• :disabled
• :enabled
• :focus
• :required
• :invalid
• :valid
• :in-range       ---選擇元素指定範圍內的值
• :out-of-range       ---選擇指定範圍之外的值的元素屬性
• :optional       ---選擇沒有"required"的元素屬性
• :read-only
• :read-write       ---選擇沒有隻讀屬性的元素屬性

結構化僞類

:first-child　　
:last-child　　
:nth-child(n)　　
:nth-last-child(n)　　
:only-child　　

:first-of-type　　---匹配屬於其父元素的首個特定類型的子元素的每一個元素；
:last-of-type　　 ---匹配元素的最後一個子元素；
:nth-of-type(n)　　 ---:nth-of-type與nth-child類似，不一樣之處在於它是隻匹配特定類型的元素；
:nth-last-type(n)　　---:nth-last-of-type與nth-of-type類似，不一樣之處在於它是從最後一個子元素開始計數的；
:only-of-type　　 ---當元素是其父元素中惟一一個特定類型的子元素時，:only-child匹配該元素；

:not　　　　　　　　---否認僞類，用於匹配不符合參數選擇器的元素；
:target　　　　　　 ---當URL帶有錨

關於child與:nth-of-type的區別，請參考CSS3選擇器:nth-child和:nth-of-type之間的差別

其餘

:root　　---匹配文檔的根元素。通常的html文件的根元素是html元素，而SVG或XML文件的根元素則多是其餘元素
:lang　　---向帶有指定 lang 屬性的元素添加樣式。

任何常規選擇器能夠再任何位置使用僞類。僞類語法不區別大小寫。一些僞類的做用會互斥，另一些僞類能夠同時被同一個元素使用。而且，爲了知足用戶在操做DOM時產生的DOM結構改變，僞類也能夠是動態的。

僞元素

CSS 僞元素用於向某些選擇器設置特殊效果。

僞元素內容

:first-letter
:first-line
:before
:after

一個選擇器只能使用一個僞元素，而且僞元素必須處於選擇器語句的最後。

使用兩個冒號::是爲了區別僞類和僞元素（CSS2中並無區別）。固然，考慮到兼容性，CSS2中已存的僞元素仍然可使用一個冒號:的語法，可是CSS3中新增的僞元素必須使用兩個冒號::。

僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文檔語言裏的。