css3: nth選擇器
我們把CSS3的：nth選擇器也稱為CSS3 結構類
選擇方法：
：first-child()，：last-child () ：nth-child(n) :nth-last-child() :nth-of-type() :nth-last-of-type () :first-of-type() :last-of-type() :only-child() :only-of-type() :empty()
首先我們可以理解，如果我們指定了上面的規則， html頁面只要有嵌套，他就會逐級找符合條件的nth選擇器 ，符合的都會執行
：first-child() 選擇其父元素的首個子元素的每個Element 元素 效果如下
使用 div效果不一樣 如下 ：
這是為什么呢 原因是因為 相對於body來說， 第一個大div 上面的三個div 相當於 body的第一個div 但是 相對於下面的三個 div 它相對於body屬於第二個div 但是第二個下面的第一個div 是屬於第二個大div里面的第一個div，所以也會變顏色。
同理 ：last-child () 指定屬於其父元素的最后一個子元素的Element元素 也是這個原理， 只不過是相反的 前提是 最后一個元素就是我們要匹配的， 如果是其他元素，則不符合。
：nth-child(n) 選擇器匹配屬於其父級元素的第n和子元素 ，不論元素類型
1-2 是相對於 第一個div中的第二個元素，即使第一個元素是span 也不影響計算
2-1-2-3都是紅的 是因為第二個大div 相對於body屬於第二個div 故其下面都會變成紅色， 如果我們只想第一個1-2變成紅色， 我們可以使用
兼容性 火狐4+ ie9+
這樣是不是就很好理解了呢
element:nth-child(number)
選擇某元素下的第number個Element 元素
element:nth-child(n)
n是一個簡單的表達式，取值從 0 開始計算， 這里的n只能是 n 不能用其他字母代替，用於批量選擇。
全部是n 2n是元素旗下的 偶數都執行 ， 2n+1 所有元素選擇都變成奇數選擇器 3n 5n 等等 表示規律
同時 可以用 element:nth-child(odd) element:nth-child(even) 表示選取奇數和偶數 第一個下標是1
element:nth-last-child(N) 概念 ： 匹配屬於其元素的第n個子元素的每個元素，不論元素類型， 從最后一個子元素開始計數
兼容性 ie9+ 火狐 4+ 用法如上 。
element:nth-of-type(N) 概念 ： 選擇器匹配屬於父元素的特定類型的第N個子元素的每個元素 不同於nth-child 的區別就是 nth不指定屬於特定類型的第n個子元素， 通俗點說就是，我從第一個標簽開始數，我不管你標簽內容是什么，無所謂什么類型的， 而 如果是nth-of-type 如果不是特定類型的，不會參與計數。
兼容性 ie9+ 火狐 4+
同理 ： :nth-last-of-type (N) 概念同element:nth-of-type(N) 只不過是倒過來計數 兼容性同上。
:first-of-type 概念 ：選擇器匹配屬於其父元素的特定類型的首個子元素的每個元素。 兼容性同上。
:last-of-type：概念 ：選擇器匹配屬於其父元素的特定類型的最后一個子元素的每個元素。 兼容性同上。
only-child 這個比較有趣 概念 ： 選擇器匹配屬於其父元素的唯一子元素的每個元素 通俗的講就是 就是匹配找到這個元素在這個父元素中只有一個指定的元素，才會被選中
only-of-child 選擇器匹配屬於其父元素的特定類型的唯一子元素的每個元素 通俗的講 就是指定指定的父級可以有其他元素，但是只能有一個指定的元素才會被選中
empty ： 概念 ： 選擇器匹配沒有子元素（包括文本節點）的每個元素