nth-child(n)和nth-of-type(n)的区别

注：纯手打，如有错误欢迎评论区交流！
转载请注明出处：https://blog.csdn.net/testleaf/article/details/144188336
编写此文是为了更好地学习前端知识，如果损害了有关人的利益，请联系删除！
本文章将不定时更新，敬请期待！！！
欢迎点赞、收藏、转发、关注，多谢！！！

nth-child(n) 和 nth-of-type(n) 是 CSS 伪类选择器，它们用于选择特定位置的元素，但有一些关键的区别。

1、nth-child(n)

选择父元素的第 n 个子元素，不论其类型。
它会根据子元素在父元素中的顺序来选择，忽略元素的类型。
示例：

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
  <span>Span 2</span>
</div>

div :nth-child(2) {
  color: red;
}

运行效果：

在这个例子中，div :nth-child(2) 会选择第二个子元素，即 <p>Paragraph 1</p> 后面的那个<span>Span 1</span>，因为它是 div 的第二个子元素。

2、nth-of-type(n)

选择父元素的第 n 个特定类型的子元素。
它只考虑特定类型的子元素，并且根据该类型的顺序来选择。
示例：

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
  <span>Span 2</span>
</div>

div p:nth-of-type(2) {
  color: red;
}

运行效果：

在这个例子中，div p:nth-of-type(2) 会选择第二个 <p> 元素，即 <p>Paragraph 2</p>，因为它是 div 中的第二个 <p> 元素。

3、总结

nth-child(n)：选择父元素的第 n 个子元素，不论类型。
nth-of-type(n)：选择父元素的第 n 个特定类型的子元素。
这两个选择器在处理复杂的 HTML 结构时非常有用，可以根据需要选择适当的伪类选择器来实现特定的样式效果。