:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型，除了<h>標簽。
n 可以是數字、關鍵詞或公式
例子一
<!DOCTYPE html> <html> <head> <style> p:nth-child(2) { background:pink; } </style> </head> <body> <h1>這是標題</h1> <p>第一個段落。</p> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p> </body> </html> 
Odd 和 even 是可用於匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是 1）
例子二
<!DOCTYPE html> <html> <head> <style> p:nth-child(odd) { background:green; } p:nth-child(even) { background:pink; } </style> </head> <body> <h1>這是標題</h1> <p>第一個段落。</p> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p> <p>第五個段落。</p> </body> </html> <h>標簽是第一個元素，但不會改變樣式
例子三
使用公式 (an + b)。描述：表示周期的長度，n 是計數器（從 0 開始），b 是偏移值
<!DOCTYPE html> <html> <head> <style> p:nth-child(3n+0) { background:pink; } </style> </head> <body> <h1>這是標題</h1> <p>第一個段落。</p> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p> <p>第五個段落。</p> <p>第六個段落。</p> <p>第七個段落。</p> <p>第八個段落。</p> <p>第九個段落。</p> </body> </html> 
上面3n+0的意識是：指定了下標是 3 的倍數的所有 p 元素的背景色
:nth-child(2n)選取偶數標簽，2n也可以是even
:nth-child(2n-1)選取奇數標簽，2n-1可以是odd
:nth-child(3n+1)自定義選取標簽，3n+1表示“隔二取一”
:nth-child(n+4)選取大於等於4標簽
:nth-child(-n+4)選取小於等於4標簽
:last-child選取最后一個標簽
:nth-last-child(3)選取倒數第幾個標簽,3表示選取第3個
:nth-child的這些用法在實際中很用得着，不用單獨給需要選取的標簽加上ID或Class
作者：hi武林高手
鏈接：https://www.jianshu.com/p/2c07849fcb53
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。