（一）結構性偽類選擇器——first-child

“：first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素（個人理解：父元素下的第一代子元素），而不是后代元素。

（二）結構性偽類選擇器——last-child

“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個子元素。

（三）結構性偽類選擇器——nth-child(n)

“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選擇器將選擇不到任何匹配的元素。

經驗與技巧:當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小于0的時候，不選擇任何匹配的元素。如下表所示：

（四）結構性偽類選擇器——nth-last-child(n)

“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個“last”，所起的作用和“:nth-child(n)”選擇器有所區別，從某父元素的最后一個子元素開始計算，來選擇特定的元素。

（五）first-of-type選擇器

“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。

例如:

/*我要改變第一個段落的背景為橙色*/

.wrapper > p:first-of-type {

background: orange;

}

（六）nth-of-type(n)選擇器

“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數也一樣，可以是具體的整數，也可以是表達式，還可以是關鍵詞。

（七）last-of-type選擇器

“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的，不同的是他選擇是父元素下的某個類型的最后一個子元素。

（八）nth-of-type(n)選擇器

“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最后一個子元素開始，而且它的使用方法類似于上節中介紹的“:nth-last-child(n)”選擇器一樣。

（九）only-child選擇器

“:only-child”選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。

（十）only-of-type選擇器

“:only-of-type”是表示一個元素他有很多個子元素，而其中只有一種類型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個元素中的唯一一個類型子元素。

代碼示例：

.wrapper > div:only-of-type {

background: orange;

}