CSS3中:nth

日期:2021-03-08 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

有关:nth-child和:nth-of-type的差别以前1直没太留意。近期准备深层次掌握1些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,若并不是,则挑选不成功。

这里附上1个小事例:

拷贝编码
编码以下:

<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>连接点。
上一篇:用CSS建立复印网页页面的实际流程 返回下一篇:没有了