nth-child和

nth-of-type的区别是什么？
nth-child和nth-of-type都是CSS选择器中用于选择元素的伪类。它们的区别在于选择元素的方式不同。
:nth-child选择的是当前元素的所有兄弟节点中的第n个元素，而不考虑元素的类型。这意味着它会选择所有类型的元素，包括文本节点、注释节点等。
:nth-of-type选择的是当前元素的所有兄弟节点中的第n个与当前元素相同类型的元素。这意味着它只会选择与当前元素相同类型的元素，忽略其他类型的元素。
举个例子来说明，假设有以下HTML结构：
<div>
<p>Paragraph 1</p>
<span>Span 1</span>
<p>Paragraph 2</p>
<span>Span 2</span>
</div>
如果我们使用:nth-child(2)选择器，它将选择第2个兄弟节点，即<span>Span 1</span>元素。而如果我们使用:nth-of-type(2)选择器，它将选择<div>元素的第2个与当前元素类型相同的子元素，即<p>Paragraph 2</p>元素。
综上所述，nth-child选择器选择的是当前元素的所有兄弟节点中的第n个元素，而nth-of-type选择器选择的是当前元素的所有兄弟节点中的第n个与当前元素相同类型的元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [:nth-child和:nth-of-type的区别](https://blog.csdn.net/liyongchunscr/article/details/124638217)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [详解CSS3中nth-child与nth-of-type的区别](https://download.csdn.net/download/weixin_38531630/12884500)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]