CSS 选择最后3个子元素

在本文中，我们将介绍如何使用CSS选择器来选取最后3个子元素。CSS选择器是一种强大的工具，可以根据元素的属性、类名、标签名等来选择元素并对其应用样式。

阅读更多：CSS 教程

使用:nth-last-child选择器

要选择最后3个子元素，我们可以使用:nth-last-child选择器结合数字参数来指定选择的范围。这个选择器会选取从后往前计数的第n个子元素。

下面是一个示例，假设我们有一个带有5个<li>元素的列表，我们要选取最后3个元素并设置它们的背景颜色为红色：

li:nth-last-child(-n+3) {
  background-color: red;
}

在上面的示例中，li:nth-last-child(-n+3)选择了最后3个<li>元素，并将它们的背景颜色设置为红色。

使用:last-child选择器

除了:nth-last-child选择器，我们还可以使用:last-child选择器来选择最后一个元素。如果我们要选择最后3个子元素，可以结合:nth-child选择器和:last-child选择器来实现。

下面是一个示例，假设我们有一个带有5个<div>元素的容器，我们要选取最后3个元素并设置它们的边框为1px红色虚线：

div:nth-child(n+3):last-child {
  border: 1px dashed red;
}

在上面的示例中，div:nth-child(n+3):last-child选择了最后3个<div>元素，并将它们的边框样式设置为1px红色虚线。

使用:not选择器

除了:nth-last-child和:last-child选择器，我们还可以使用:not选择器结合:nth-child选择器来选择非特定位置的子元素。

下面是一个示例，假设我们有一个带有8个<p>元素的父容器，我们要选取除了前5个和最后一个子元素之外的元素，并将它们的文本颜色设置为蓝色：

p:not(:first-child):not(:nth-last-child(1)) {
  color: blue;
}

在上面的示例中，p:not(:first-child):not(:nth-last-child(1))选择了除了第一个和最后一个<p>元素之外的其他元素，并将它们的文本颜色设置为蓝色。

总结

本文介绍了如何使用CSS选择器来选取最后3个子元素。我们可以使用:nth-last-child选择器来选择从后往前计数的第n个子元素，使用:last-child选择器来选择最后一个子元素，以及使用:not选择器结合:nth-child选择器来排除特定位置的子元素。通过合理运用这些选择器，我们可以轻松地选取和样式化所需的子元素。