CSS3中新增的選擇器最具代表性的就是序選擇器。

1.同級別的第幾個

1.? ? ? :first-child 選中同級別中的第一個標簽

注意點：不區分類型

? ? ??

但是我們這里有一個注意點，如果我們在第一個p之前加一個h1，則第一個p就不變紅了，因為我們是選中同級別中的第一個標簽，在我們這個界面中，h1，p，div是同級別的，所以第一個p不變色。

?

2.? :last-child 選中同級別中的最后一個標簽

注意點：不區分類型

3.? ? :nth-child(n)? 選中同級別中的第幾個標簽

注意點：不區分類型

現在想給我是段落7設置成紅色，我是段落7是我們同級別中的第三個，我們應該這么寫

為什么我是段落2也變色了？因為對于body來說，h1，3個p和div都是同級別的，所以我選中同級別的第三個就也選中了我是段落2.

4.? ? ? :nth-last-child(n) 選中同級別中的倒數第幾個標簽

5.? ? ? ?:only-child? ? 選中父元素中唯一的元素

首先看body元素中有兩個元素，一個p，一個div，所以不是唯一元素，所以不變色，而div下只有一個p，所以變色，而如果在div下再添加一個h1標簽，則它們都不變色了，因為div下有兩個元素了，不是唯一都了

2.同類型的第幾個

1.? ? ? ?:first-of-type 選中同級別中同類型的第一個標簽

來看下面的例子：

怎么給我是段落1 設置成紅色呢？

首先，h1，兩個p，div是同級別的，而在這個同級別中，兩個p又是同類型的，所以我是段落1就是同類型的第一個，那我們有沒有辦法取出同級別中同類型的第一個呢？就用我們下面的方法：同類型的第幾個。

2.? ? ?:last-of-type 選中同級別中同類型的最后一個標簽

我們現在想讓我是段落2和我是段落5都變色，那么我們需要怎么做？

我們需要取出同級別同類型的最后一個，這個時候就取出了我是段落2和我是段落5

3.? nth-of-type(n)選中同級別中同類型的第幾個標簽

現在我要給我是段落3，我是段落7設置顏色，因為我是段落7是第三個，而我是段落3不是第三個，所以這是，我們要用到同級別，同類型的第三個

??

4.? ? ? ? :nth-last-of-type? 選中同級別中同類型的倒數第幾個標簽

??

5.? ? ? only-of-type? 選中父元素中唯一類型的某個標簽

現在我想選中我是段落2，雖然它不是唯一的標簽，我也想選中它，應該這么寫

這時我發現我是段落1與我是段落2都變色了，因為在body中有唯一類型的p標簽，而在div下也有唯一類型的p標簽，所以這兩個都改變顏色了

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=2ckjhaa&title=課時77.序選擇器（掌握）