首页 > 文章 > 前端

CSS选择最后一个子元素的方法是使用:last-child伪类选择器。这个选择器可以选中某个父元素下的最后一个子元素。示例：.parent>div:last-child{/样式代码/}在这个例子中，.parent是父元素，div是子元素，:last-child表示选择.parent中的最后一个div元素。注意事项：仅适用于直接子元素：:last-child只会选择父元素的直接子元素（即没

时间：2025-11-12 10:16:31 342浏览收藏

珍惜时间，勤奋学习！今天给大家带来《CSS如何选择最后一个子元素》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

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

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

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

基本语法

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

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

实际用法示例

假设你有如下 HTML 结构：

段落 1

段落 2

文本 1

段落 3

文本 2

如果你想选中最后一个

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

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

这里虽然

不是整个

的最后一个子元素，但它是所有 p 类型中的最后一个，因此会被选中。

同样，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-child伪类选择器。这个选择器可以选中某个父元素下的最后一个子元素。示例：.parent>div:last-child{/*样式代码*/}在这个例子中，.parent是父元素，div是子元素，:last-child表示选择.parent中的最后一个div元素。注意事项：仅适用于直接子元素：:last-child只会选择父元素的直接子元素（即没有嵌套在其他元素中的子元素）。如果想选择所有后代元素中的最后一个，应使用:last-of-type或者:nth-last-child(1)。与:last-of-type的区别：:last-child是基于所有子元素的顺序。:last-of-type是基于相同类型的子元素的顺序。.parent>div:last-of-type{/*选择父元素中最后一个div子元素*/}兼容性：:last-child在现代浏览器中广泛支持，包括Chrome、Firefox、Safari和Edge。更多示例：/*选择最后一个p元素*/p:last-child{color:red;》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！