CSS 选择器 :nth-last-child()

简介

:nth-last-child() 是一个 CSS 伪类选择器，它允许开发者根据元素在其父元素中的位置来选择元素。与 :nth-child 不同的是，:nth-last-child 从最后一个子元素开始计数。

语法

:nth-last-child(an + b) {
  /* 属性声明 */
}

这里的 an + b 表达式用于计算需要选择的元素位置。a 和 b 都是整数，其中 a 通常大于等于0，而 b 则是一个非负整数。n 是一个可变的值，可以取0、1、2等。

使用场景

:nth-last-child 通常用于选择特定位置的元素，特别是在处理动态生成的内容时非常有用。例如，你可能想给列表中的某些元素添加特定的样式，而这些元素的位置是从后往前数的。

示例

假设我们有如下 HTML 结构：

<div class="container">
  <p>第一段</p>
  <p>第二段</p>
  <p>第三段</p>
  <p>第四段</p>
  <p>第五段</p>
</div>

我们可以使用 :nth-last-child 来选择特定的 <p> 元素：

// www.javascriptcn.com code example
/* 选择倒数第二个 <p> 元素 */
.container p:nth-last-child(2) {
  color: red;
}

/* 选择倒数第三个 <p> 元素 */
.container p:nth-last-child(3) {
  font-weight: bold;
}

上述代码将使倒数第二个 <p> 元素的文字变为红色，而倒数第三个 <p> 元素的文字将会加粗显示。

复杂示例

让我们看一个更复杂的例子，使用 :nth-last-child 结合 an + b 的语法来选择特定位置的元素：

/* 选择倒数第 4 个和之后的每个元素 */
.container p:nth-last-child(-n+4) {
  background-color: yellow;
}

这段代码会使得倒数第四个以及之后的所有 <p> 元素背景色变为黄色。

注意事项

• 当使用 :nth-last-child 时，请确保所选元素确实存在于该父元素中。如果不存在，选择器将不会匹配任何元素。
• 由于 :nth-last-child 从最后一个子元素开始计数，因此在处理大量子元素时可能需要特别注意性能问题。

实际应用案例

在实际项目中，:nth-last-child 经常被用来实现交替行的颜色变化效果。例如，在一个表格中，你可以通过这种方式为每行添加不同的背景颜色，从而提高数据的可读性。

table tr:nth-last-child(even) {
  background-color: #f2f2f2;
}

以上代码会使表格中的偶数行背景色变为浅灰色。

通过以上的介绍，你应该对如何使用 :nth-last-child 有了基本的理解。这个选择器是一个强大的工具，可以帮助你在多种情况下实现更灵活、更精确的样式控制。