????在css3中有兩個(gè)新的選擇器可以選擇父元素下對(duì)應(yīng)的子元素恕汇，一個(gè)是:nth-child?另一個(gè)是:nth-of-type甘畅。 但是它們到底有什么區(qū)別呢动雹？
????其實(shí)區(qū)別很簡(jiǎn)單：:nth-of-type為什么要叫:nth-of-type腋么？因?yàn)樗且?type"來(lái)區(qū)分的蝶怔。也就是說(shuō)：ele:nth-of-type(n)是指父元素下第n個(gè)ele元素抱婉，而ele:nth-child(n)是指父元素下第n個(gè)元素且這個(gè)元素為ele西潘，若不是容握，則選擇失敗。
????文字未免聽(tīng)起來(lái)比較晦澀估盘，便于理解瓷患，這里附上一個(gè)小例子：
<style>.demo li:nth-child(2){color:red;}.demo li:nth-of-type(2){color:blue;}</style><body><div><ulclass="demo"><p>zero</p><li>one</li><li>two</li></ul></div>
????上面這個(gè)例子，.demo li:nth-child(2)選擇的是<li>one</li>節(jié)點(diǎn)遣妥，而.demo li:nth-of-type(2)則選擇的是<li>two</li>節(jié)點(diǎn)擅编。
.demo li:nth-child(2)的選擇過(guò)程分析：
:nth-child(2)以選擇數(shù)字優(yōu)先，它先找到了父類(lèi)?.demo?箫踩，然后再查找父類(lèi).demo的第二個(gè)子元素爱态，先判斷這個(gè)子元素是否為li,如果是則選擇，非則選擇失敗境钟。
.demo li:nth-of-type(2)的選擇過(guò)程分析：
:nth-of-type(2)以選擇類(lèi)型優(yōu)先锦担，它先找到了父類(lèi)?.demo?，然后從?.demo?中選擇li元素的第2個(gè)
但是如果在nth-child和 nth-of-type前不指定標(biāo)簽?zāi)兀?/p>
<style>.demo :nth-child(2){color:#ff0000;}.demo :nth-of-type(2){color:#00ff00;}</style><body><ulclass="demo"><p>first p</p><li>first li</li><li>second li</li><p>second p</p></ul></body>
????如上可見(jiàn)慨削，在他們之前不指定標(biāo)簽類(lèi)型洞渔，：nth-child(2)?選中依舊是第二個(gè)元素，無(wú)論它是什么標(biāo)簽缚态。而:nth-type-of(2) 選中了兩個(gè)元素磁椒，分別是父級(jí).demo中的第二個(gè)p標(biāo)簽和第二個(gè)li標(biāo)簽，由此可見(jiàn)玫芦，不指定標(biāo)簽類(lèi)型時(shí)浆熔，:nth-type-of(2)會(huì)選中所有類(lèi)型標(biāo)簽的第二個(gè)。
我們已經(jīng)了解了nth-child和 nth-of-type的基本使用與區(qū)別姨俩，那么更進(jìn)一步nth-of-type(n)與nth-child(n)中的n是什么呢蘸拔？
nth-of-type(n)與nth-child(n)中的n可以是數(shù)字、關(guān)鍵詞或公式环葵。
數(shù)字：也就是上面例子的使用调窍，就不做贅述。
關(guān)鍵詞：Odd 张遭、even
Odd 和 even 是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞
注意：第一個(gè)子元素的下標(biāo)是 1
在這里邓萨，我們?yōu)槠鏀?shù)和偶數(shù) p 元素指定兩種不同的背景色：
<style><style>
//odd 奇數(shù)
? p:nth-of-type(odd){background:red;}//even 偶數(shù)
? p:nth-of-type(even){background:blue;}</style><body><div><ulclass="demo"><p>first p</p><p>second p</p><p>first p</p><p>second p</p><p>first p</p><p>second p</p><p>first p</p><p>second p</p></ul></div></body></style>
公式：或者說(shuō)是算術(shù)表達(dá)式
????使用公式 (an + b)。描述：表示周期的長(zhǎng)度菊卷，n 是計(jì)數(shù)器（從 0 開(kāi)始）缔恳，b 是偏移值。在這里洁闰，我們指定了下標(biāo)是 3 的倍數(shù)的所有 p 元素的背景色：
<style>p:nth-of-type(3n+0){background:#ff0000;}</style>
若是 :nth-of-type(4n+2) 就是選擇下標(biāo)是4的倍數(shù)加上2的所有元素
