CSS選擇器中，我們經(jīng)常需要選擇一組元素中的第幾個(gè)元素，這時(shí)候我們可以使用偽類選擇器

:nth-child()

或

:nth-of-type()

。

首先，

:nth-child()

選擇器可以選擇某個(gè)元素的父元素下的所有子元素中的第n個(gè)元素，如下所示：

/* 選擇第3個(gè)子元素 */
parent:nth-child(3) {
/* 樣式 */
}

注意，這里的3是表示在所有子元素中的位置，包括文本節(jié)點(diǎn)等非元素節(jié)點(diǎn)。

如果你只想選擇特定類型的元素中的第n個(gè)元素，你可以使用

:nth-of-type()

選擇器。如下所示：

/* 選擇第3個(gè)div元素 */
div:nth-of-type(3) {
/* 樣式 */
}

這里的3表示是選擇div元素中的第3個(gè)。注意，這里只會(huì)選擇div元素，而不會(huì)選擇其他類型的元素。

最后，需要注意的是，

:nth-child()

和

:nth-of-type()

選擇器可以使用數(shù)值表達(dá)式表示選擇多個(gè)元素。如下所示：

/* 選擇1-3個(gè)元素 */
:nth-child(n+1):nth-child(-n+3) {
/* 樣式 */
}

這里的n表示任意數(shù)值，即從第1個(gè)元素到第3個(gè)元素都會(huì)被選擇。