偽類選擇器：大的分類可以分為結構偽類選擇器、動態偽類選擇器和UI元素狀態偽類選擇器

結構偽類選擇器

1、nth系列選擇器：nth-child和nth-of-type

:first-child選擇某個元素的第一個子元素；
:last-child選擇某個元素的最後一個子元素；
:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-last-child()倒序選擇某個元素的一個或多個特定的子元素；
:only-child選擇的元素是它的父元素的唯一一個了元素；

:first-of-type選擇一個上級元素下的第一個同類子元素；
:last-of-type選擇一個上級元素的最後一個同類子元素；
:nth-of-type()選擇指定的元素；
:nth-last-of-type()倒序選擇指定的元素；
:only-of-type選擇一個元素是它的上級元素的唯一一個相同型別的子元素；
 

child和of-type的區別：child的索引是從第一個子元素開始計算的，不區分型別；of-type的索引是按照型別單獨計算索引的

比如下面使用child選擇器設定li元素都將無效：

<ul>
    <p>段落1</p>
    <li>列表1</li><!-- 在未非分類的情況下，li子元素索引為2 -->
</ul>

li:first-child{
    background-color:red;
}

li:nth-child(1){
    background-color:blue;
}

li:only-child{
    background-color:yellow;
}
 

如果換成type，都會起作用的：

li:first-of-type{
    background-color:red;
}

li:nth-of-type(1){
    background-color:blue;
}

li:only-of-type{
    background-color:yellow;
}

2、:empty選擇器

:empty是用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格，比如說，你有三個段落，其中一個段落什麼都沒有，完全是空的，你想這個p不顯示

p:empty {display: none;}

3、否定選擇器（:not）

定位不匹配該選擇器的元素，比如對form中所有input加邊框，但又不想submit也起變化

input:not([type="submit"]) {border: 1px solid red;}

4、動態偽類選擇器

因為這些偽類並不存在於HTML中,而只有當用戶和網站互動的時候才能體現出來，動態偽類包含兩種，第一種是我們在連結中常看到的錨點偽類，如”:link”,”:visited”;另外一種被稱作使用者行為偽類，如“:hover”,”:active”，”:focus”和“:target”。

.demo a:link {color:gray;}/*連結沒有被訪問時前景色為灰色*/
.demo a:visited{color:yellow;}/*連結被訪問過後前景色為黃色*/
.demo a:hover{color:green;}/*滑鼠懸浮在連結上時前景色為綠色*/
.demo a:active{color:blue;}/*滑鼠點中啟用連結那一下前景色為藍色*/
input[type="text"]:focus{color:red}/*文字框獲取焦點是景色為紅色*/
#tab1:target{z-index: 1;}/*點選頁面的超連結並跳轉至#tab1元素，在#tab1(target)元素上顯示效果*/

5、UI元素狀態偽類選擇器

:enabled選擇器用來指定當前元素處於可用狀態時的樣式
:disabled選擇器用來指定當前元素處於不可用狀態時的樣式
:checked選擇器用來指定當表單中的radio單選按鈕或checkbox複選框處於選取狀態的時的樣式。在ff下需要寫成-moz-checked的形式
:read-only選擇器用來指定當元素處於只讀狀態時的樣式，在ff下需要寫成-moz-read-only的形式
:read-write選擇器用來指定當元素處於非只讀狀態時的樣式。在ff下需要寫成-moz-read-write的形式
:default 指定當頁面開啟時預設處於選區狀態的radio或checkbox控制元件的樣式
:indeterminate 指定當頁面開啟時，如果一組單選框中任何一個單選框都沒有被設定為選取狀態時整組單選框的樣式，如果使用者選取了一個單選框，則該樣式被取消
:required input為空的時候觸發。
:valid 當填寫的內容符合要求的時候觸發。
:invalid 當填寫的內容不符合要求的時候觸發。
比如說你想將”disabled”的文字框與別的文字框區別出來：

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

更詳細的使用案例和解說可以看W3CPLUS的CSS3–偽類選擇器

6、偽元素選擇器

CSS中的偽元素:first-line,:first-letter,:before,:after;那麼在CSS3中，對偽元素進行了一定的調整，在以前的基礎上增加了一個“：”也就是現在變成了“::first-letter,::first-line,::before,::after”另外他還增加了一個“::selection”,ff下格式為”::-moz-selection“，只對background-color和color有效