:nth-child()這個選擇符括號內可以寫+/- an + b （a，b均為整數）或者關鍵字

因為工作中有遇到要隱藏列表第三個子元素之后的所有子元素，所以有用到這個選擇器，記錄一下

(1) nth-child(a)

當括號里只寫一個數字，比如?.list li:nth-child(2)，作用為選中父元素list的第二個子元素li標簽，如果list的第二個子元素不是li標簽，則選擇符失效

.list li:nth-child(2) { color: #f00; }

(2) nth-child(2n) / nth-child(2n+1)

括號內寫2n就是選中list父元素的所有偶數項子元素list；2n+1就是選中所有奇數項子元素。

.list > li:nth-child(2n + 1){color: #f00; }

(3) nth-child(even) / nth-child(odd)

括號內也允許使用關鍵字：odd代表奇數，even代表偶數。

.list > li:nth-child(even){color: #0f0; }

(4) nth-child(+/-n+b)

n的作用是連續向后選中，b的作用是從第幾個子元素開始。 以.list li:nth-child(n+3)為例，將會選中第三個元素及之后的所有子元素

.list > li:nth-child(n + 3){color: #E6CC7E; } .list > li:nth-child(-n + 3){color: #E6CC7E; }

總結

以上是生活随笔為你收集整理的CSS选择器（nth-child）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。