CSS屬性nth-child可以非常方便地選擇一個元素在其父元素中的位置。直接理解為第n個兒子元素即可。

這個屬性經常出現在使用CSS選擇器時，對于手寫網頁或者一些基礎的前端開發非常有用。

/*選擇第一個兒子*/
p:nth-child(1) {
background-color: red;
}
/*選擇第三個兒子以下的奇數兒子*/
p:nth-child(n+3):nth-child(odd) {
color: green;
}

上面的例子展示了兩種不同的使用方法。第一個選擇器用來選擇第一個p元素，將其背景設置成紅色。第二個選擇器對于位置我們需要做一些解釋，它先選擇第三個兒子開始，再篩選出其中的奇數兒子（即${3,5...}$），將此處的p元素文字設置成綠色。

注意：nth-child屬性可以添加對應選擇器之外的參數，包括n,<=n,>=n等，可以方便地進行多重條件篩選。

/*選擇第三個(包括第三個)之前的p元素*/
p:nth-child(-n+3) {
border: 1px solid black;
}
/*選擇第1,3,5,7,9..個p元素進行樣式處理*/
p:nth-child(2n-1) {
text-decoration: underline;
}

在實際開發過程中，會遇到很多復雜的布局與設計，如根據某個參數判斷樣式是否生效等，畢竟CSS也是編程語言，只是沒有那么高逼格。

所以掌握nth-child選擇器是必須的。展開CSS的世界吧。