CSS 選擇器 nth-child 的幾種用法
- 2019 年 11 月 13 日
- 筆記
在開發過程中，會碰到一些選擇器的需求：
例如使列表中的第一項或者最後一項顯示不同的樣式 、列表中的奇數或者偶數項顯示不同的背景色 . . . 等等。
我們可以通過 CSS 來實現這樣的效果，CSS 給我們提供了幾個樣式參數：first-child、last-child、nth-child(n)。
下面介紹它們的使用方法：
first-child first-child：選擇列表中的第一個標籤。
舉例：第一行字體顯示為紅色，程式碼如下：
li:first-child{ color: red; }
last-child last-child：選擇列表中的最後一個標籤。
舉例，最後一行字體顯示為綠色，程式碼如下：
li:last-child{ color: green; }
nth-child(n) nth-child(n)：選擇列表中的第 n 個標籤。
舉例：第三行字體顯示為藍色，程式碼如下：
li:nth-child(3){ color: blue; }
nth-child(odd) nth-child(odd)：選擇列表的奇數行。
舉例，奇數行背景顯示為灰色，程式碼如下：
li:nth-child(odd){ background: #999; }
我們可以通過另外的方法選擇奇數行，例如： nth-child(n+1) 、 nth-child(2n-1) 等。
程式碼如下：
/*First*/ li:nth-child(n+1){ background: #999; } /*Second*/ li:nth-child(2n-1){ background: #999; }
nth-child(even) nth-child(even)：選擇列表的偶數行。
舉例：偶數行背景顯示為土黃色（不要在意那些細節），程式碼如下：
li:nth-child(even){ background: #F6E0AF; }
同樣，我們可以通過另外的方法選擇奇數行，例如： nth-child(2n) 。
程式碼如下：
li:nth-child(2n){ background: #F6E0AF; }
上面的幾種方法運行效果如下圖：
上面是幾種比較常見的選擇方法，我們還可以通過 CSS 更靈活的進行選擇，有下面幾種方法：
nth-child(-n+n) nth-child(-n+n)：選擇第 n 個之前的元素（此處的 n 是後面的那個，下同）。
舉例：前三行背景色設置為綠色，程式碼如下：
li:nth-child(-n+3){ background: #2cae1d; }
nth-child(n+n) nth-child(n+n)：選擇第 n 個之後的元素。
舉例：第五行及以後背景色設置為藍色，程式碼如下：
li:nth-child(n+5){ background: #0ab1fc; }
nth-last-child(n) nth-last-child(n)：選擇倒數第 n 個元素。
舉例：倒數第三元素字體設置為紅色，程式碼如下：
li:nth-last-child(3){ color: red; }
同樣可以使用上面的方法進行拓展，方法如下：
nth-last-child(n+n) nth-last-child(n+n)：選擇倒數第 n 個之前的元素。
舉例：倒數第三個及之前的元素字體設置為粗體，程式碼如下：
li:nth-last-child(n+3){ font-weight: bold; }
上面的幾種方法運行效果如下圖：
nth-last-child(3n) nth-last-child(3n)：選擇第 3、6、. . . 個元素，選擇三的倍數。
舉例：第3、6、 . . . 三的倍數行背景色設置為橙色，程式碼如下：
li:nth-child(3n){ background: orange; }
nth-last-child(3n+1) nth-last-child(3n+1)：選擇第 1、4、7 個元素，從第一個開始每個遞增三個。
舉例：第1、4、7 . . . 行背景色設置為紅色，程式碼如下：
li:nth-child(3n+1){ background: red; }
上面的幾種方法運行效果如下圖：
當然，可能還有更多的使用方法，我在這只是簡單的記錄一下我常用的幾種，也希望大家能夠舉一反三，能在項目中更好的利用起來。
