css3中nth-child與nth-of-type的區別其實很簡單：:nth-of-type為什麼要叫:nth-of-type？因為它是以"type"來區分的。也就是說：ele:nth-of-type(n)是指父元素下第n個ele元素， 而ele:nth-child(n)是指父元素下第n個元素且這個元素為ele，若不是，則選擇失敗。
demo
程式設計客棧p>zero
結果如下：
上面這個例子，.demo li:nth-child(2)選擇的是
節點，而.demo li:nth-of-type(2)則選擇的是節點。
但是如果在nth-child和 nth-of-type前不指定標籤呢？
.demo :nth-child(2)
.demo :nth-of-type(www.cppcns.com2)
這樣又會是什麼結果呢，看下html結構：
first p
second p
結果：程式設計客棧如上可見，在他們之前不指定標籤型別，：nth-child(2) 選中依舊是第二個元素，無論它是什麼標籤。而 :nth-type-of(2) 選中了兩個www.cppcns.com元素，分別是父級.demo中的第二個p標籤和第二個li標籤，由此可見，不指定標籤型別時，:nth-type-of(2)會選中所有型別標籤的第二個。
我們已經了解了nth-child和 nth-of-type的基本使用與區別，那麼更進一步nth-of-type(n)與nth-child(n)中的n是什麼呢？
nth-of-type(n)與nth-child(n)中的n可以是數字、關鍵詞或公式。 數字：也就是上面例子的使用，就不做贅述。 關鍵詞：odd 、even
odd 和 even 是可用於匹配下標是奇數或偶數的子元素的關鍵詞
注意：第乙個子元素的下標是 1
在這裡，我們為奇數和偶數 p 元素指定兩種不同的背景色：
p:nth-of-type(odd)
p:nth-of-type(even)
公式：或者說是算術表示式
使用公式 (an + b)。描述：表示週期的長度，n 是計數器（從 0 開始），b 是偏移值。
在這裡，我們指定了下標是 3 的倍數的所有 p 元素的背景色：
p:nth-of-type(3n+0)
若是 :nth-of-type(4n+2) 就是選擇下標是4的倍數加上2的所有元素
總結
CSS3的nth child 選擇器
nth child 瀏覽器支援 ie9及以上版本，火狐，谷歌，safari opera都支援！nth child n 選擇器匹配屬於其父元素的第 n個子元素，不論元素的型別。p nth child 2 將匹配body的第二個元素 不要把 nth child 和 nth of type 混淆。css3...
詳解CSS中 nth child的用法
tips 還用低版本的ie瀏覽器的哥們請繞過！nth child 2 選取第幾個標籤，2可以是你想要的數字 demo01 li nth child 2 nth child n 4 選取大於等於4標籤，n 表示從整數，下同 點此檢視例項展示 demo01 li nth child n 4 nth ch...
詳解CSS中 nth child的用法
前端的哥們想必都接觸過css中乙個神奇的玩意，可以輕鬆選取你想要的標籤並給與修改新增樣式，是不是很給力，它就是 nth child 下面我將用幾個典型的例項來給大家講解 nth child的實際用途 tips 還用低版本的ie瀏覽器的哥們請繞過！demo01 li nth child 2 點此檢視例...