nth-child、nth-of-type的区别

nth-child和nth-of-type是CSS的两个伪选择符，用于选择特定位置的元素。

nth-child(n)选择的是在其父元素下的第n个子元素，无论其类型是什么。例如，如果我们使用nth-child(2)选择器，它会选择父元素下的第二个子元素，无论其类型是什么。

而nth-of-type(n)选择的是在其父元素下，与其同类型的第n个子元素。也就是说，它只会选择与给定类型相同的元素。例如，如果我们使用nth-of-type(2)选择器，它只会选择父元素下同类型的第二个子元素。

因此，nth-child和nth-of-type之间的区别在于选择的元素类型不同。nth-child不考虑元素的类型，而nth-of-type只考虑与给定类型相同的元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type...](https://blog.csdn.net/MFWSCQ/article/details/89150093)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *3* [详解CSS nth-child与nth-of-type的元素查找方式](https://download.csdn.net/download/weixin_38592256/14831190)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]