關于:nth-child和:nth-of-type的區別之前一直沒太注意。最近打算深入了解一些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，若不是，則選擇失敗。?

這里附上一個小例子：?

復制代碼 代碼如下:
<div>?
<ul class="demo">?
<p>zero</p>?
<li>one</li>?
<li>two</li>?
</ul>?
</div>?

上面這個例子，.demo li:nth-child(2)選擇的是<li>one</li>節點，而.demo li:nth-of-type(2)則選擇的是<li>two</li>節點。

轉載于:https://www.cnblogs.com/devilkin-wang/p/6211387.html

總結

以上是生活随笔為你收集整理的CSS3中:nth-child和:nth-of-type的区别深入理解。 关于:nth-child和:nth-of-type的区别之前一直没太注意，经深入理解才发现里面其实暗藏玄机...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。