關(guān)于:nth-child和:nth-of-type的區(qū)別之前一直沒(méi)太注意。最近打算深入了解一些CSS3，才發(fā)現(xiàn)里面其實(shí)暗藏玄機(jī)。?

:nth-child可以選擇父元素下的字元素，:nth-of-type也可以。但是它們到底有什么區(qū)別呢？?

其實(shí)區(qū)別很簡(jiǎn)單：:nth-of-type為什么要叫:nth-of-type？因?yàn)樗且?#34;type"來(lái)區(qū)分的。也就是說(shuō)：ele:nth-of-type(n)是指父元素下第n個(gè)ele元素，?

而ele:nth-child(n)是指父元素下第n個(gè)元素且這個(gè)元素為ele，若不是，則選擇失敗。?

這里附上一個(gè)小例子：?

復(fù)制代碼 代碼如下:
<div>?
<ul class="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)。

轉(zhuǎn)載于:https://www.cnblogs.com/devilkin-wang/p/6211387.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。