CSS中 nth-child 与 nth-of-type 的区别

在日常前端开发中，我们经常会使用CSS的伪类选择器来定位和样式化特定的元素。其中，nth-child 和 nth-of-type 是两个常用的伪类选择器，它们都能够选择特定顺序的元素，但它们的工作方式略有不同。

一、nth-child 伪类选择器

nth-child 是一种基于元素在其父元素中的位置来选择的伪类选择器。它会选择父元素的第n个子元素，无论这个子元素是什么类型。

语法：

element:nth-child(n)

其中，element 是选择的元素类型，n 是一个数字或表达式，表示要选择的元素在父元素中的顺序。

常用表达式：

• nth-child(n)：选择第 n 个子元素，n 是从1开始的序号。
• nth-child(odd)：选择所有奇数位置的子元素。
• nth-child(even)：选择所有偶数位置的子元素。
• nth-child(2n)：选择所有偶数位置的子元素，等同于 nth-child(even)。
• nth-child(2n+1)：选择所有奇数位置的子元素，等同于 nth-child(odd)。

示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

如果我们使用以下CSS：

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

那么，第二个 li 元素（即“Item 2”）会被选中并应用红色字体。

注意：

nth-child 选择的是所有子元素，而不考虑它们的类型。这意味着如果父元素中包含不同类型的子元素，nth-child 会将它们都纳入计算。

二、nth-of-type 伪类选择器

与 nth-child 不同，nth-of-type 是基于元素类型来选择特定顺序的元素。它只会选择特定类型的元素，而不会考虑其他类型的子元素。

语法：

element:nth-of-type(n)

其中，element 是选择的元素类型，n 是该类型元素在同类型元素中的顺序。

示例：

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

如果我们使用以下CSS：

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

那么，第二个 p 元素（即“Paragraph 2”）会被选中并应用蓝色字体。span 元素并不会影响 p 元素的顺序计算，因为 nth-of-type 只考虑与目标元素相同类型的元素。

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

1. 选择范围：

   • nth-child 选择的是父元素中的第 n 个子元素，无论子元素的类型是什么。
   • nth-of-type 选择的是父元素中第 n 个特定类型的子元素，忽略其他类型的元素。

2. 计算方式：

   • nth-child 是从父元素的所有子元素中进行顺序计算。
   • nth-of-type 只从父元素的同类型子元素中进行顺序计算。

示例对比：

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

如果使用 nth-child：

p:nth-child(2) {
  color: green;
}

由于 span 是第二个子元素，所以没有任何 p 元素会被选中。

但如果使用 nth-of-type：

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

则第二个 p 元素（“Paragraph 2”）会被选中并应用绿色样式。

四、实际开发中的应用场景

1. 使用 nth-child：
   当你想要根据元素在父级中的实际位置来选择元素时，使用 nth-child 是合适的。例如，在一个混合了 div、p 和 span 的父元素中，想选择其中的第二个元素而不管它是什么类型。

2. 使用 nth-of-type：
   当你需要选择父元素中特定类型的元素，并且只对这些元素进行样式应用时，使用 nth-of-type 是最佳选择。例如，在一个文章段落中只对第二个段落（p）进行样式化，而忽略其他类型的元素（如 img 或 span）。

五、总结

nth-child 和 nth-of-type 都是强大的CSS选择器，能够帮助我们更加灵活地选择和样式化页面元素。它们的主要区别在于：nth-child 选择的是所有子元素的顺序，而 nth-of-type 只考虑同类型元素的顺序。在实际开发中，根据具体的需求选择合适的伪类选择器，能够使你的CSS更加简洁和高效。

通过合理使用这两个选择器，可以简化很多复杂的样式逻辑，尤其是在处理动态内容或复杂的HTML结构时非常有用。