:nth-child()這個(gè)選擇符括號(hào)內(nèi)可以寫+/- an + b （a，b均為整數(shù)）或者關(guān)鍵字

因?yàn)楣ぷ髦杏杏龅揭[藏列表第三個(gè)子元素之后的所有子元素，所以有用到這個(gè)選擇器，記錄一下

(1) nth-child(a)

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

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

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

括號(hào)內(nèi)寫2n就是選中list父元素的所有偶數(shù)項(xiàng)子元素list；2n+1就是選中所有奇數(shù)項(xiàng)子元素。

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

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

括號(hào)內(nèi)也允許使用關(guān)鍵字：odd代表奇數(shù)，even代表偶數(shù)。

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

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。