Site icon 时鹏亮的Blog

CSS3中:nth-child和:nth-of-type的区别深入理解

请知悉:本文最近一次更新为 9年 前,文中内容可能已经过时。

nth-child和:nth-of-type,这俩东东,我一直只知道nth-child……还真是丢人啊,最近装修首页,发现nth-child失灵了,奇怪了,仔细研究了下,发现竟然还有一个属性是nth-of-type。这回深入的研究了下这俩属性的差别,发现nth-child失灵正是因为他们俩的差别造成的。

以下部分摘自:http://www.jb51.net/css/142398.html

: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)选择的是

  • one
  • 节点,而.demo li:nth-of-type(2)则选择的是

  • two
  • 节点。


    如您从本文得到了有价值的信息或帮助,请考虑扫描文末二维码捐赠和鼓励。

    尊重他人劳动成果。转载请务必附上原文链接,我将感激不尽。


    与《CSS3中:nth-child和:nth-of-type的区别深入理解》相关的博文:

    Exit mobile version