在CSS樣式表中，經常需要進行對網頁中元素的選擇，而nth-of-type(n)選擇器能夠幫助我們更加方便快捷地選擇需要的元素。
一、選擇器類型
nth-of-type(n)選擇器是CSS中的一個偽類選擇器，是基于元素類型的選擇器。其中，n可以是一個整數、odd或even。
它的使用方式如下所示：
/*選擇第n個類型為特定元素的子元素*/
:nth-of-type(n)
/*選擇奇數個類型為特定元素的子元素*/
:nth-of-type(odd)
/*選擇偶數個類型為特定元素的子元素*/
:nth-of-type(even)
二、選擇器用法
這個選擇器可以幫助我們對網頁中的元素按照一定的規律進行選擇，比如選擇表格中第2行的所有單元格：
/*選擇表格中的第2行所有單元格*/
tr:nth-of-type(2) td
當然，如果我們想要選擇表格中的1、3、5行，則可以這樣寫：
/*選擇表格中1、3、5行所有單元格*/
tr:nth-of-type(odd) td
三、選擇器的局限性
nth-of-type(n)選擇器雖然能夠幫助我們按照一定規律來選擇網頁元素，但是它也有一定的局限性。
首先，對于不同的元素類型，nth-of-type(n)選擇器只會把他們看作不同類型的元素，而不是按照常規的標簽來區分。例如，對于下面這段HTML代碼：
<ul>
<li>列表1-1</li>
<li>列表1-2</li>
</ul>
<ol>
<li>列表2-1</li>
<li>列表2-2</li>
</ol>
如果我們想要選擇所有的列表項，則需要使用下面的CSS代碼：
/*選擇所有列表項*/
li:nth-of-type(n)
其次，nth-of-type(n)選擇器只能從父元素中進行選擇，而不能跨級選擇元素。
四、選擇器的實際應用
nth-of-type(n)選擇器基本上可以用在所有需要按照一定規律選取元素的場合。例如，我們可以用它來實現根據分辨率屏幕大小來選擇不同的字體大?。?/p>
/*根據分辨率選擇不同的字體大小*/
@media screen and (max-width: 600px) {
/*選擇所有p元素*/
p {
font-size: 16px;
}
/*選擇第二個p元素*/
p:nth-of-type(2) {
font-size: 18px;
}
/*選擇第三個p元素*/
p:nth-of-type(3) {
font-size: 20px;
}
}
除此之外，nth-of-type(n)選擇器還可以用在其他領域，例如在JavaScript中選取DOM元素、對表格進行樣式調整等等。