如何用css:last-of-type和nth-last-child组合-css教程-PHP中文网

如何用css:last-of-type和nth-last-child组合

P粉602998670

发布： 2025-09-19 17:22:01

原创

582人浏览过

:last-of-type 选择同类型标签的最后一个元素，而 :nth-last-child(n) 从末尾倒数第 n 个子元素开始匹配；两者可组合使用以实现更精准的样式控制。

如何用css:last-of-type和nth-last-child组合

在 CSS 中，

:last-of-type

登录后复制

和

:nth-last-child()

登录后复制

都是伪类选择器，用于选中特定位置的元素。虽然它们功能相似，但工作方式不同。理解它们的区别和组合使用场景，有助于精准控制页面样式。

:last-of-type 是什么？

:last-of-type 选择的是其父元素中同类型标签的最后一个元素。比如多个

登录后复制

标签中，最后一个

登录后复制

会被选中，不管中间有没有其他类型的元素。

例如：

p:last-of-type

登录后复制

会选中最后一个

<p>

登录后复制

元素，即使它后面还有

<div>

登录后复制

或

<span>

登录后复制

。

:nth-last-child() 又是怎么工作的？

:nth-last-child(n) 从父元素的最后一个子元素开始倒数，匹配倒数第 n 个子元素，且必须是同级的直接子元素。

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

常见用法：

```
:nth-last-child(1)
```
登录后复制
等同于
```
:last-child
```
登录后复制
—— 最后一个子元素
```
:nth-last-child(2)
```
登录后复制
匹配倒数第二个子元素
```
:nth-last-child(odd)
```
登录后复制
匹配倒数第奇数位的元素

可以组合使用吗？

可以！将

:last-of-type

登录后复制

和

:nth-last-child()

登录后复制

组合使用，能实现更精确的选择逻辑。组合时，两个条件。

示例场景：

你想选中既是某种类型最后一个，又处于倒数第几个位置的元素。

比如：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

p:last-of-type:nth-last-child(2) {
  color: red;
}

登录后复制

这行 CSS 的意思是：选中同时满足两个条件的

登录后复制

元素：

它是所有
```
p
```
登录后复制
标签中的最后一个（
```
:last-of-type
```
登录后复制
）
它也是父元素所有子元素中倒数第二个（
```
:nth-last-child(2)
```
登录后复制
）

只有当同一个

登录后复制

同时满足这两个条件时，样式才会生效。

实际应用场景

这类组合常用于结构固定的模块，比如文章末尾的提示段落或评论列表的最后一项。

举个例子：

假设你有一组动态内容，希望当最后一个段落恰好是倒数第二个子元素时，给它加边框：

.content p:last-of-type:nth-last-child(2) {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

登录后复制

这样可以避免对真正最后一个元素（可能是按钮或图片）应用不该有的样式。

基本上就这些。关键是理解两者判断依据不同：

:last-of-type

登录后复制

看元素类型，

:nth-last-child

登录后复制

看整体位置。组合使用时要确保逻辑一致，否则可能选不到任何元素。

以上就是如何用css:last-of-type和nth-last-child组合的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何在Grunt中自动化处理CSS代码？优化构建流程的实用方法如何使用IntelliJIDEA编写模块化CSS代码？提高代码复用的方法如何在Quasar框架中编写CSS代码？优化跨平台样式的详细教程如何在Alipay小程序中隐藏滚动条？CSS提升用户体验的技巧 Brackets编辑器中CSS代码缩进错误怎么办？调整代码格式的技巧