css3 nth-child選擇器

css3的nth-child選擇器，乍看起來很簡單，其實不是那麼容易。

簡單用法

p:nth-child(n) // 選擇屬於其父元素的第n個子元素的每個 <p> 元素
p:nth-child(2n) // 選擇屬於其父元素的子元素的每個偶數<p> 元素
p:nth-child(2n + 1) // 選擇屬於其父元素的子元素的每個奇數<p> 元素

注意事項

大概大家都知道上面的使用方法，但是有一點搞不清楚的話，使用起來就會很困惑。那就是n是什麼？

n是從0開始的正整數，它代表著一個序列，0， 1， 2……這樣的。

但是:nth-child(n+m)中的n+m是從1開始計算的,也就是說子元素的起始計算序號是1，不存在0這樣子的元素。第一個元素就是1，不是0。這和程式裡面的陣列起始序號還有jQuery的選擇器都是不一樣的。

這樣子就很好理解了。當我們要選擇哪些元素的時候，只要把引數根據n的遞增算出來的值對應到子元素在父元素裡面的位置序列就好了

比如查詢第一個元素

:nth-child(1)

查詢序列大於等於10的元素

:nth-child(n+10)

就這樣子的

css3中還有一些其他的子元素選擇器

比如

:first-child // 第一個元素
:last-child    // 最後一個元素
:nth-last-child // 從最後一個子元素開始計數，n還是0開始，但是子元素的最後一個是1，倒過來了

互相輔助，還是很好用的