這篇文章主要為大家展示了“CSS3選擇器:nth-child和:nth-of-type之間有什么區(qū)別”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS3選擇器:nth-child和:nth-of-type之間有什么區(qū)別”這篇文章吧。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括浮梁網(wǎng)站建設(shè)、浮梁網(wǎng)站制作、浮梁網(wǎng)頁(yè)制作以及浮梁網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，浮梁網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到浮梁省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

先看一個(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)簽的文字變成了紅色：

盡管上面兩個(gè)demo的最后效果一致，但是兩個(gè)選擇器之間存在差異是必然的。

對(duì)于:nth-child選擇器，在簡(jiǎn)單白話文中，意味著選擇一個(gè)元素：

1、這是個(gè)段落元素
2、這是父標(biāo)簽的第二個(gè)孩子元素

對(duì)于:nth-of-type選擇器，意味著選擇一個(gè)元素：

1、選擇父標(biāo)簽的第二個(gè)段落子元素

我們把上面的實(shí)例稍作修改，就可以看到這兩個(gè)選擇器之間的差異表現(xiàn)了，如下HTML代碼：

    
我是一個(gè)普通的div標(biāo)簽
    
我是第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è)子元素。

p:nth-of-type(2)的表現(xiàn)顯得很堅(jiān)挺，其把希望渲染的第二個(gè)p標(biāo)簽染紅了。

以上是“CSS3選擇器:nth-child和:nth-of-type之間有什么區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！