:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,
而ele:nth-child(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>节点。
本文详细解释了CSS中:nth-of-type与:nth-child的区别及应用。通过一个具体的HTML示例,展示了这两种伪类选择器如何在实际网页布局中选择特定元素。
253

被折叠的 条评论
为什么被折叠?



