简介

:last-child 选择器用于匹配父元素的最后一个子元素。它是一个伪类选择器，可以与其他选择器组合使用以实现更精细的样式。

语法

element:last-child {
  /* 样式声明 */
}

其中：

• element 是要应用样式的元素。
• :last-child 是伪类选择器，它选择父元素的最后一个子元素。

示例

以下示例将为父元素的最后一个子 <li> 元素添加红色背景：

ul li:last-child {
  background-color: red;
}

兼容性

:last-child 选择器在所有主要浏览器中都得到广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

用例

:last-child 选择器可以用于各种场景，包括：

• 为列表中的最后一个项目添加不同的样式。
• 在表格中突出显示最后一行的单元格。
• 在导航菜单中为最后一项添加不同的背景颜色。
• 在幻灯片中为最后一页添加不同的样式。

高级用法

:last-child 选择器可以与其他选择器组合使用以实现更精细的样式。例如：

• ul li:nth-child(even):last-child：选择列表中偶数个的最后一个子 <li> 元素。
• div:last-child p:first-child：选择父元素的最后一个子 <div> 元素中的第一个 <p> 子元素。
• section:last-child > div：选择父元素的最后一个子 <section> 元素中的所有 <div> 子元素。

注意点

• :last-child 选择器仅选择直接子元素。它不会选择嵌套的子元素。
• 如果父元素没有子元素，:last-child 选择器不会匹配任何元素。
• :last-child 选择器与 :nth-last-child(n) 选择器类似，但后者允许您指定要匹配的最后一个子元素的相对位置。

替代方案

在某些情况下，可以使用其他选择器来实现与 :last-child 选择器类似的效果，例如：

• :last-of-type：选择父元素中特定类型的最后一个子元素。
• :nth-last-child(1)：选择父元素的最后一个子元素。

然而，:last-child 选择器通常更简洁、更易于阅读。