:nth-child和:nth-of-type区别

:nth-child和:nth-of-type都是CSS选择器中的伪类，用于选择某个元素在其父元素中的位置。它们的区别在于：

- :nth-child(n)选择器选取的是父元素下的第n个子元素，无论它是什么类型的元素。
- :nth-of-type(n)选择器选取的是父元素下第n个与该元素类型相同的子元素。

举个例子，假设有如下HTML结构：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
  <li>列表项6</li>
</ul>

如果我们想选择第2个列表项，可以使用以下两种方式：

/* 使用:nth-child */
li:nth-child(2) {
  color: red;
}

/* 使用:nth-of-type */
li:nth-of-type(2) {
  color: blue;
}

在上面的例子中，使用:nth-child(2)会选择到第2个子元素，也就是列表项2，而使用:nth-of-type(2)会选择到第2个与该元素类型相同的子元素，也就是同样是列表项的第2个子元素，也就是列表项2。