: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 个子元素,又是最后一个子元素的那个元素。
常见用途包括:
- 当列表项数量恰好为 n 时,给最后一个(也就是第 n 个)元素特殊样式。
- 确保某个位置的元素仅在它同时也是最后一个时才应用样式。
实际示例
假设我们有一个不定长度的列表,但我们希望当列表**正好有3个 item** 时,给第三个 item 加上特殊背景:
- Item 1
- Item 2
- Item 3
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,你可以基于位置和结构动态控制样式,特别适合处理可变内容的布局。










