css中的nth-child和nth-of-type用於選擇父元素下第n個子元素，但是對於他們的理解卻不夠深入，所以通過這個下面的示例詳細展示一下他們的效果。
一、准備頁面
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 .node, 11 .status { 12 width: 50px; 13 height: 20px; 14 line-height: 20px; 15 text-align: center; 16 margin-left: 20px; 17 margin-top: 5px; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="container"> 23 <div class="node">1 d-1</div> 24 <p class="status">2 p-a</p> 25 <div class="node">3 d-2</div> 26 <div class="node">4 d-3</div> 27 <p class="status">5 p-b</p> 28 <p class="status">6 p-c</p> 29 <div class="node">7 d-4</div> 30 <div class="node">8 d-5</div> 31 </div> 32 </body> 33 </html>
本次使用的都是.container下的元素，div和p統一編號為1-8，div元素有類node，會再顯示d-1、d-2...文字，同樣p元素有類status，會再顯示p-1、p-2...文字。
頁面初始顯示如下圖：
二、nth-child
2.1選擇容器下的第二個子元素
添加如下樣式：
第二個子元素被選中：
2.2選擇容器下的第六個子元素
添加如下樣式（說明每一種情況下，除基礎樣式外只有該部分的樣式）：
第六個子元素被選中：
通過2.1和2.2知道nth-child選擇元素時不區分元素的標簽類型，統一排序選擇對應序號的元素。
2.3選擇第一個和最后一個元素的特殊選擇器
2.4倒序選擇器，用法與nth-child一樣，從后向前排序。
2.5可以給偽類前加標簽限定
如下是選擇容器下的第一個且是div的子元素：
第一個子元素是div元素，所以被選中：
如下是選擇容器下的第一個且是p的子元素：
第一個子元素是div元素，所以沒有元素被選中：
2.6可以給偽類前加類名限定
添加node類進行限制選中的結果：
第二、第五個子元素的類是status，所以沒有被選中；第七個子元素的類是node，所以被選中：
添加status類進行限制選中的結果：
第六個子元素的類是status，所以被選中：
2.7參數n的特殊用法
n的取值0，1，2，3，4，5，6.....，所以2n+1命中的是第一、第三、第五、第七位
所以2n命中的是第二、第四、第六、第八位。
這是常見的奇數位與偶數位的選擇，可以使用odd與even參數
另外一些常見的用法：
選擇第一、第四、第七...
n+4選擇第四個之后的子元素
-n + 6選擇前六個子元素
高級用法：
選擇第四到第六個元素
三、nth-of-type
3.1選擇容器中每一類標簽的第三個子元素
如圖，第三個div和p元素均被選中：
3.2可以給偽類前加類名限定
可以給偽類前加類名限定
有status類的子元素中第三個被選中：
對於倒序的選擇也是一樣的：
有status類的子元素中倒數第三個被選中：
說明一下，這個偽類選擇器都是從父元素下開始查找的，所以有類名或標簽名限定時可以省略父級選擇器。如本例中這樣寫也是可以的
3.3另外兩個特殊的選擇每一種標簽(類)的第一個子元素和最后一個子元素
四、總結
nth-child是從父元素下不分類型統一排序，先選中第n個子元素，再看看是不是對應的類(或標簽)；
nth-of-type從父元素下先按照類名(或標簽)分別排序，再選擇每一排序中的第n個子元素。