SASS 中的最后一个孩子和最后一个类型选择器

在 SASS 中，我们可以使用 :last-child 和 :last-of-type 来选择最后一个元素，两者之间有一些不同之处。下面我们将分别介绍它们的使用。

:last-child

:last-child 选择器匹配最后一个子元素，无论它是什么类型。以下是一个示例：

li:last-child {
  color: red;
}

通过上面的代码，我们可以将列表的最后一个列表项的文本颜色设置为红色。在 HTML 代码中，我们可以这样写：

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Last item</li> <!-- 这个元素的文本颜色会被设置为红色 -->
</ul>

:last-of-type

:last-of-type 也用于选择最后一个子元素，但它只选择与指定类型相同的最后一个元素。以下是一个示例：

p:last-of-type {
  font-size: 24px;
}

通过上面的代码，我们可以将最后一个段落的字体大小设置为 24 像素。在 HTML 代码中，我们可以这样写：

<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <h2>Heading</h2>
  <p>Last paragraph</p> <!-- 这个元素的字体大小会被设置为 24 像素 -->
</div>

需要注意的是，:last-of-type 只会检查和当前元素同级的元素，而不会考虑嵌套的元素。如果你想使用该选择器来匹配嵌套的元素，可以使用 :last-child。

总的来说，:last-child 和 :last-of-type 都是 SASS 中非常有用的选择器。我们可以运用它们来实现一些巧妙的样式效果，让页面更加美观。