CSS3新增的偽類選擇器
偽類選擇器的作用：對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。CSS 3提供的偽類選擇器主要分為以下三類：
- 結構性偽類選擇器
- UI元素狀態偽類選擇器
- 其他偽類選擇器
1、結構性偽類選擇器
- Selector:root：匹配文檔的根元素。在HTML文檔中，根元素永遠是<html.../>元素。
- Selector:first-child：匹配符合Selector選擇器，且必須是其父元素的第一個子節點的元素。
- Selector:last-child：匹配符合Selector選擇器，且必須是其父元素的最後一個子節點的元素。
- Selector:nth-child(n)：匹配符合Selector選擇器，且必須是其父元素的第n個子節點的元素。
- Selector:nth-last-child(n)：匹配符合Selector選擇器，且必須是其父元素的倒數第n個子節點的元素。
- Selector:only-child：匹配符合Selector選擇器，且必須是其父元素的唯一子節點的元素。
- Selector:first-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的第一個元素。
- Selector:last-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的最後一個元素。
- Selector:nth-of-type(n)：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的第n個元素。
- Selector:nth-last-of-type(n)：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的倒數第n個元素
- Selector:only-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的唯一一個元素。
- Selector:empty：匹配符合Selector選擇器，且其內部沒有任何子元素（包括文本節點）的元素。
- Selector:lang(lang)：匹配符合Selector選擇器，且內容是特定語言的元素。
對於：nth-child和:nth-last-child兩個偽類選擇器，還支持如下用法。
Selector:nth-child(odd/event)：匹配符合Selector選擇器，且必須是其父元素的第奇數個/偶數個子節點的元素
Selector:nth-last-child(odd/event)：匹配符合Selector選擇器，且必須是其父元素的第奇數個/偶數個子節點的元素
Selector:nth-child(xn+y)：匹配符合Selector選擇器，且必須是其父元素的第xn+y個子節點的元素
Selector:nth-last-child(xn+y)：匹配符合Selector選擇器，且必須是其父元素的第xn+y個子節點的元素
使用:nth-last-child偽類選擇器的示例如下：
<head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> child </title> <style type="text/css"> /* 定義對作為其父元素的倒數第3n+1個（1、4、7）子節點 的li元素起作用的CSS樣式 */ li:nth-last-child(3n+1) { border: 1px solid black; } </style> </head> <body> <ul> <li id="java">Java</li> <li id="javaee">輕量級Java EE</li> <li id="ajax">Ajax</li> <li id="xml">XML</li> <li id="ejb">經典Java EE</li> <li id="android">Android</li> </ul> </body>
其效果如下：
2、UI元素狀態偽類選擇器
UI元素狀態偽類選擇器包含有：Selector:link、Selector:visited、Selector:active、Selector:hover、Selector:focus、Selector:enabled、Selector:disabled、Selector:checked、Selector:default、Selector:indeterminate、Selector:read-only、Selector:read-write、Selector:required、Selector:optional、Selector:valid、Selector:invalid、Selector:in-range、Selector:out-of-range、Selector::selection(該選擇器前面有兩個冒號)。
3、其他偽類選擇器
3.1：target偽類選擇器（匹配符合Selector選擇器且必須是命名錨點目標的元素）
要求元素必須是命名錨點的目標，且必須是當前正在訪問的目標。它的作用是頁面可通過該選擇器高亮顯示正在被訪問的目標。
3.2：not偽類選擇器（匹配符合Selector1選擇器但不符合Selector2選擇器的元素，相當於用Selector1減去Selector2）
CSS3新增的偽類選擇器