last-child vs last-of-type

:last-child 和 :last-of-type 是两个常用的 CSS 伪类选择器，它们的作用类似，但有一些关键的不同点。以下是它们的详细解释：

1. :last-child

What (是什么):

• :last-child 选择器用于选择一个元素，该元素是其父元素中的最后一个子元素，不论该子元素的类型是什么。

When (何时使用):

• 当你需要选择父元素中最后一个子元素，无论其具体类型时，使用 :last-child 伪类选择器。

示例：

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

<style>
  .container p:last-child {
    color: red;
  }
</style>

解释: 在这个例子中，p:last-child 选择器不会匹配到任何元素，因为 p 标签并不是父元素中的最后一个子元素。:last-child 选择的是最后的那个子元素，即 span 元素。

2. :last-of-type

What (是什么):

• :last-of-type 选择器用于选择一个元素，该元素是其父元素中同类元素（相同标签名元素）的最后一个子元素。

When (何时使用):

• 当你需要选择父元素中某一类型的最后一个子元素时（如最后一个 p 标签），使用 :last-of-type 伪类选择器。

示例：

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

<style>
  .container p:last-of-type {
    color: red;
  }
</style>

解释: 在这个例子中，p:last-of-type 选择器将会匹配到第二个 p 元素，并将其文本颜色设置为红色，因为它是同类元素（p 标签）的最后一个。

3. 总结与区别

• last-child 选择父元素的最后一个子元素，无论其类型是什么。
• last-of-type 选择父元素中特定类型的最后一个子元素。

例子对比

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

<style>
  .container p:last-child {
    color: blue; /* This will not be applied because the last child is a span, not a p */
  }

  .container p:last-of-type {
    color: green; /* This will be applied to the second p element */
  }
</style>

• 在这个例子中，p:last-child 选择器不会匹配到任何元素，因为 p 标签不是父元素中的最后一个子元素。相反，p:last-of-type 选择器将匹配到第二个 p 元素。

实用场景

• :last-child 用于需要选择父元素的最后一个子元素，不关心元素类型的场景，例如给列表的最后一个元素添加样式。
• :last-of-type 用于需要选择父元素中特定类型的最后一个元素的场景，例如在混合内容中，只想对最后一个段落或最后一张图片应用样式。

了解这两个伪类选择器的区别有助于在适当的场景下选择正确的工具，从而编写出更加高效和简洁的 CSS 代码。