举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同？

让我们用一些例子来说明 :nth-child、:first-child 和 :first-of-type 之间的区别：

假设我们有以下 HTML 结构：

<div class="container">
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
  <span>Span 2</span>
  <div>Div 1</div>
</div>

1. :first-child

:first-child 匹配父元素的第一个子元素。

.container :first-child {
  color: red;
}

在这个例子中，只有 "Paragraph 1" 会变成红色。 :first-child 只关心元素是否是其父元素的第一个子元素，而不管它的类型。

2. :first-of-type

:first-of-type 匹配父元素中同类型元素的第一个。

.container p:first-of-type {
  color: blue;
}

.container span:first-of-type {
  color: green;
}

这里，"Paragraph 1" 会变成蓝色，"Span 1" 会变成绿色。 "Paragraph 2" 不会有任何变化，因为它不是第一个 p 元素。 :first-of-type 关心元素类型，并选择该类型中的第一个。

3. :nth-child(n)

:nth-child(n) 是一个更通用的选择器，它允许你选择父元素的第 n 个子元素。

.container :nth-child(2) {
  font-weight: bold;
}

.container :nth-child(even) {
  font-style: italic;
}

.container p:nth-child(2) { /* 注意这里 */
  text-decoration: underline;
}

• 第一个规则会将 "Span 1" 的字体加粗，因为它是第二个子元素。
• 第二个规则会将 "Span 1"， "Span 2" 和 "Div 1" 的字体变为斜体，因为它们是偶数子元素 (第2, 4, 和6个)。
• 第三个规则很重要，它展示了:nth-child 和 :nth-of-type 的关键区别。 这个规则不会对任何元素生效。虽然 "Paragraph 2" 是第二个 p 元素，但它却是 .container 的第三个子元素。 :nth-child 只考虑元素在父元素中的位置，而不考虑元素的类型。 如果要选择第二个 p 元素，需要使用 :nth-of-type(2)。

总结：

• :first-child: 选择父元素的第一个子元素。
• :first-of-type: 选择父元素中特定类型的第一个子元素。
• :nth-child(n): 选择父元素的第 n 个子元素 (无论类型)。

希望这些例子能清晰地解释它们之间的区别。 理解这些区别对于编写高效且精准的 CSS 选择器至关重要。