CSS3中:nth-child和:nth-of-type有什么区别？

11 min read

在CSS中，:nth-child和:nth-of-type是两个伪类选择器，它们可以用于选择满足指定规则的元素，但它们之间有一些重要的区别：

  1. :nth-child(n)选择父元素下的第n个子元素，无论该子元素的类型是什么。
    :nth-of-type(n)选择父元素下同类型的第n个子元素。它只会匹配同类型的元素，而不管其他类型的元素。

  2. :nth-child(n) 的n的值可以是一个整数，一个表达式，也可以是关键字even或odd。它可以匹配所有类型的元素，无论是 、 还是 。
    而:nth-of-type(n)的n的值必须是一个整数或者是关键字even或odd，它只会匹配指定元素类型的第n个子元素。

举个例子，如果我们有如下HTML代码：

<ul>
  <li>第1个</li>
  <li>第2个</li>
  <li class="red">第3个</li>
  <li>第4个</li>
  <li class="red">第5个</li>
</ul>

我们想选择ul元素的第三个子元素，可以使用如下两种方式：

/* 选择所有类型的第三个子元素 */
ul :nth-child(3) {}

/* 选择同类型的第三个子元素 */
ul li:nth-of-type(3) {}

第一种方式将选择ul元素下的第三个子元素，无论它的类型是什么（这里将选择class为red的第三个子元素）；而第二种方式只选择ul元素下的li元素中的第三个元素。因此，以上两种方式的选择结果是不同的。