雷林鵬分享：CSS 僞類(Pseudo-classes)

　　CSS僞類是用來添加一些選擇器的特殊效果。

　　語法

　　僞類的語法：

　　selector:pseudo-class {property:value;}

　　CSS類也能夠使用僞類：

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

　　anchor僞類

　　在支持 CSS 的瀏覽器中，連接的不一樣狀態均可以以不一樣的方式顯示

　　實例

　　a:link {color:#FF0000;} /* 未訪問的連接 */ a:visited {color:#00FF00;} /* 已訪問的連接 */ a:hover {color:#FF00FF;} /* 鼠標劃過連接 */ a:active {color:#0000FF;} /* 已選中的連接 */

　　注意： 在CSS定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。

　　注意： 在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。

　　注意：僞類的名稱不區分大小寫。

　　僞類和CSS類

　　僞類能夠與 CSS 類配合使用：

　　a.red:visited {color:#FF0000;} CSS 語法

　　若是在上面的例子的連接已被訪問，它會顯示爲紅色。

　　CSS :first-child 僞類

　　您能夠使用 :first-child 僞類來選擇父元素的第一個子元素。

　　注意：在IE8的以前版本必須聲明 ，這樣 :first-child 才能生效。

　　匹配第一個

元素

　　在下面的例子中，選擇器匹配做爲任何元素的第一個子元素的

元素：

　　實例

　　p:first-child { color:blue; }

　　匹配全部

元素中的第一個 元素

　　在下面的例子中，選擇相匹配的全部

元素的第一個 元素：

　　實例

　　p > i:first-child { color:blue; }

　　匹配全部做爲第一個子元素的

元素中的全部 元素

　　在下面的例子中，選擇器匹配全部做爲元素的第一個子元素的

元素中的全部 元素：

　　實例

　　p:first-child i { color:blue; }

　　CSS - :lang 僞類

　　:lang 僞類使你有能力爲不一樣的語言定義特殊的規則

　　注意：IE8必須聲明才能支持;lang僞類。

　　在下面的例子中，:lang 類爲屬性值爲 no 的q元素定義引號的類型：

　　實例

　　q:lang(no) {quotes: "~" "~";}

　　全部CSS僞類/元素

　　選擇器示例示例說明

　　:checkedinput:checked選擇全部選中的表單元素

　　:disabledinput:disabled選擇全部禁用的表單元素

　　:emptyp:empty選擇全部沒有子元素的p元素

　　:enabledinput:enabled選擇全部啓用的表單元素

　　:first-of-typep:first-of-type選擇每一個父元素是p元素的第一個p子元素

　　:in-rangeinput:in-range選擇元素指定範圍內的值

　　:invalidinput:invalid選擇全部無效的元素

　　:last-childp:last-child選擇全部p元素的最後一個子元素

　　:last-of-typep:last-of-type選擇每一個p元素是其母元素的最後一個p元素

　　:not(selector):not(p)選擇全部p之外的元素

　　:nth-child(n)p:nth-child(2)選擇全部 p 元素的父元素的第二個子元素

　　:nth-last-child(n)p:nth-last-child(2)選擇全部p元素倒數的第二個子元素

　　:nth-last-of-type(n)p:nth-last-of-type(2)選擇全部p元素倒數的第二個爲p的子元素

　　:nth-of-type(n)p:nth-of-type(2)選擇全部p元素第二個爲p的子元素

　　:only-of-typep:only-of-type選擇全部僅有一個子元素爲p的元素

　　:only-childp:only-child選擇全部僅有一個子元素的p元素

　　:optionalinput:optional選擇沒有"required"的元素屬性

　　:out-of-rangeinput:out-of-range選擇指定範圍之外的值的元素屬性

　　:read-onlyinput:read-only選擇只讀屬性的元素屬性

　　:read-writeinput:read-write選擇沒有隻讀屬性的元素屬性

　　:requiredinput:required選擇有"required"屬性指定的元素屬性

　　:rootroot選擇文檔的根元素

　　:target#news:target選擇當前活動#news元素(點擊URL包含錨的名字)

　　:validinput:valid選擇全部有效值的屬性

　　:linka:link選擇全部未訪問連接

　　:visiteda:visited選擇全部訪問過的連接

　　:activea:active選擇正在活動連接

　　:hovera:hover把鼠標放在連接上的狀態

　　:focusinput:focus選擇元素輸入後具備焦點

　　:first-letterp:first-letter選擇每一個

元素的第一個字母

　　:first-linep:first-line選擇每一個

元素的第一行

　　:first-childp:first-child選擇器匹配屬於任意元素的第一個子元素的

元素

　　:beforep:before在每一個

元素以前插入內容

　　:afterp:after在每一個

元素以後插入內容

　　:lang(language)p:lang(it)爲

元素的lang屬性選擇一個開始值

　　(編輯：雷林鵬 來源：網絡 侵刪)