一、深呼吸括眠，直接內(nèi)容
:nth-child和:nth-of-type都是CSS3中的偽類選擇器刨沦，其作用近似卻又不完全一樣，對(duì)于不熟悉的人對(duì)其可能不是很區(qū)分哪工，本文就將介紹兩者的不同奥此，以便于大家正確靈活使用這兩類選擇器。
先看一個(gè)簡(jiǎn)單的實(shí)例雁比，首先是HTML部分：
? ?
我是第1個(gè)p標(biāo)簽
? ?我是第2個(gè)p標(biāo)簽
然后兩個(gè)選擇器相對(duì)應(yīng)的CSS代碼如下：
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
上面這個(gè)例子中稚虎，這兩個(gè)選擇器所實(shí)現(xiàn)的效果是一致的，第二個(gè)p標(biāo)簽的文字變成了紅色偎捎，如下截圖（截自IE9）：
您可以狠狠地點(diǎn)擊這里：:nth-child測(cè)試demo1:nth-of-type測(cè)試demo1
盡管上面兩個(gè)demo的最后效果一致蠢终，但是兩個(gè)選擇器之間存在差異是必然的。
對(duì)于:nth-child選擇器茴她，在簡(jiǎn)單白話文中寻拂，意味著選擇一個(gè)元素如果：
這是個(gè)段落元素
這是父標(biāo)簽的第二個(gè)孩子元素
對(duì)于:nth-of-type選擇器，意味著選擇一個(gè)元素如果：
選擇父標(biāo)簽的第二個(gè)段落子元素
:nth-of-type選擇器丈牢，恩……怎么講呢祭钉？限制條件少點(diǎn)~~
我們把上面的實(shí)例稍作修改，就可以看到這兩個(gè)選擇器之間的差異表現(xiàn)了己沛，如下HTML代碼：
? ?
我是第1個(gè)p標(biāo)簽
? ?我是第2個(gè)p標(biāo)簽
還是與上面例子一致的CSS測(cè)試代碼：
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
這時(shí)候兩個(gè)選擇器所渲染的結(jié)果就不一樣了慌核。
p:nth-child(2)悲劇了，其渲染的結(jié)果不是第二個(gè)p標(biāo)簽文字變紅申尼，而是第一個(gè)p標(biāo)簽垮卓，也就是父標(biāo)簽的第二個(gè)子元素。如下效果截圖：
您可以狠狠地點(diǎn)擊這里：:nth-child測(cè)試demo2
p:nth-of-type(2)的表現(xiàn)顯得很堅(jiān)挺师幕，其把希望渲染的第二個(gè)p標(biāo)簽染紅了粟按，如下截圖：
您可以狠狠地點(diǎn)擊這里：:nth-of-type測(cè)試demo2
對(duì)照上面兩個(gè)選擇器的語義，此處的效果表現(xiàn)差異不難理解霹粥。
對(duì)于p:nth-child(2)表示這個(gè)元素要是p標(biāo)簽灭将，且是第二個(gè)子元素，是兩個(gè)必須滿足的條件后控。于是宗侦，就是第一個(gè)p標(biāo)簽顏色為紅色（正好符合：p標(biāo)簽，第二個(gè)子元素）忆蚀。如果在div標(biāo)簽后面再插入個(gè)span標(biāo)簽矾利，如下：
? ?
我是第1個(gè)p標(biāo)簽
? ?我是第2個(gè)p標(biāo)簽
那么p:nth-child(2)將不會(huì)選擇任何元素。
而p:nth-of-type(2)表示父標(biāo)簽下的第二個(gè)p元素馋袜，顯然男旗，無論在div標(biāo)簽后面再插入個(gè)span標(biāo)簽，還是h1標(biāo)簽欣鳖，都是第二個(gè)p標(biāo)簽中的文字變紅察皇。
這兩者的差異用一個(gè)跟切合實(shí)際的情況比喻就是計(jì)劃生育查人口：前者是如果是第二胎，且是女孩泽台，罰款什荣！后者是管他第幾胎，第二個(gè)出身的女孩怀酷，罰款稻爬！
