如何通过css:last-of-type选择最后一个子元素-css教程-PHP中文网

如何通过css:last-of-type选择最后一个子元素

P粉602998670

发布： 2025-09-17 20:14:01

原创

608人浏览过

:last-of-type 选择父元素中同类型标签的最后一个子元素，如 p:last-of-type 选中最后一个 p 元素，不受后续其他类型元素影响，常用于去除最后项边框、调整间距等场景。

如何通过css:last-of-type选择最后一个子元素

:last-of-type 是 CSS 中的一个伪类选择器，用于选择父元素中同类型中的最后一个子元素。它不是简单地选择最后一个子元素，而是根据元素的标签类型来判断。

基本语法

selector:last-of-type { 样式声明 }

这个选择器会匹配指定类型的元素中，在其父容器内是该类型最后一个出现的元素。

实际用法示例

假设你有如下 HTML 结构：

如果你想选中最后一个

<p>

登录后复制

元素（即“段落 3”），可以这样写：

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

p:last-of-type {
color: red;
}

这里虽然

<p>

登录后复制

不是整个

<div>

登录后复制

的最后一个子元素，但它是所有

登录后复制

类型中的最后一个，因此会被选中。

通义万相

通义万相，一个不断进化的AI艺术创作大模型

596

查看详情

同样，

span:last-of-type

登录后复制

会选择“文本 2”，因为它是

span

登录后复制

类型的最后一个。

常见使用场景

去除列表中最后一个同类元素的边框或分割线
调整排版中最后一段的外边距
在混合类型内容中精准控制样式

例如，下面这段代码可以去掉同类型按钮中最后一个的右边距：

button:last-of-type {
margin-right: 0;
}

注意事项

:last-of-type 是基于元素类型的，不是基于类名或位置。比如：

这两个都是

div

登录后复制

类型，所以

div:last-of-type

登录后复制

会选中第二个。

如果你希望按

class

登录后复制

区分，CSS 没有直接的

:last-of-class

登录后复制

，需要借助其他方式，比如给最后一个添加特定类名，或使用 JS 控制。

基本上就这些。掌握

:last-of-type

登录后复制

能帮你更灵活地处理结构复杂的 DOM 样式问题。

以上就是如何通过css:last-of-type选择最后一个子元素的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题