css伪类:last-child与nth-child组合使用

:last-child 与 :nth-child() 可并列使用，如 li:nth-child(3):last-child 表示选中既是第3个子元素又是最后一个的元素，常用于列表项数固定时的特殊样式控制。

在CSS中，:last-child 和 :nth-child() 是两个常用的结构性伪类，它们可以单独使用，也可以结合其他选择器配合实现更精确的样式控制。虽然不能直接“组合”成一个伪类，但可以通过并列使用来限定元素同时满足“是某类型的第n个子元素”且“是其父元素的最后一个子元素”这两个条件。

什么是 :last-child 与 :nth-child()？

:last-child 选中父元素中的最后一个子元素，前提是该元素匹配指定类型（或无类型限制）。

:nth-child(n) 选中父元素中第 n 个位置的子元素，n 可以是数字、关键词或公式。

例如：

立即学习“前端免费学习笔记（深入）”；

• p:last-child：选中作为最后一个子元素的段落标签。
• p:nth-child(3)：选中父元素中第3个位置的段落标签（前提是该位置确实是 p 标签）。

如何“组合”使用 :last-child 与 :nth-child

要让一个元素**同时满足**是第 n 个子元素，并且是最后一个子元素，可以直接将两个伪类写在同一个选择器中：

selector:nth-child(n):last-child

这表示：选中既是第 n 个子元素，又是最后一个子元素的那个元素。

常见用途包括：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

• 当列表项数量恰好为 n 时，给最后一个（也就是第 n 个）元素特殊样式。
• 确保某个位置的元素仅在它同时也是最后一个时才应用样式。

实际示例

假设我们有一个不定长度的列表，但我们希望当列表**正好有3个 item** 时，给第三个 item 加上特殊背景：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

li:nth-child(3):last-child {
  background-color: yellow;
}

这个规则的意思是：“选中既是第3个子元素，又是最后一个子元素的 li”。只有当第3个 li 恰好是最后一个时才会生效 —— 也就是说，列表刚好有3个元素。

如果列表有4个元素，第3个 li 不是 last-child，样式就不会应用。

灵活使用公式：比如奇数个元素时处理中间项

你还可以结合公式使用。例如，想选中一个奇数长度列表的正中间那个元素，并且它必须是最后一个？这不太现实。但反过来，你可以判断某个位置是否同时是最后一个。

更实用的场景是：防止某些样式在最后一个元素上重复应用。

比如，给前三个列表项加右边框，但如果是最后一个元素就不加：

li:nth-child(-n+3) {
  border-right: 2px solid #ccc;
}

li:nth-child(-n+3):last-child {
  border-right: none;
}

这段代码先给前3个 li 加边框，然后“撤销”其中是最后一个元素的那个，避免末尾出现多余线条。

基本上就这些。通过结合 :nth-child 和 :last-child，你可以基于位置和结构动态控制样式，特别适合处理可变内容的布局。

以上就是css伪类:last-child与nth-child组合使用的详细内容，更多请关注php中文网其它相关文章！