头闻号

安徽合盛塑胶科技有限公司

发泡设备|塑料模|模具设备|PP|LDPE|注塑加工

首页 > 新闻中心 > 科技常识:CSS3中:nth
科技常识:CSS3中:nth
发布时间:2024-12-25 09:57:48        浏览次数:5        返回列表

今天小编跟大家讲解下有关CSS3中:nth-child和:nth-of-type的区别深入理解 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS3中:nth-child和:nth-of-type的区别深入理解 的相关资料,希望小伙伴们看了有所帮助。

关于: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>节点。

来源:爱蒂网