CSS选择最后一个子元素的方法是使用:last-child伪类选择器。这个选择器可以匹配作为其父元素最后一个子元素的元素。示例代码：.parent>:last-child{/*样式规则*/}说明：.parent是父元素的类名。>表示直接子元素（即只选父元素的直接子元素，不包括更深层的后代元素）。:last-child匹配的是父元素中的最后一个子元素。注意事项：如果你只想选最后一个特定类
时间：2026-04-12 10:09:33 265浏览 收藏
本文深入解析了CSS中`:last-of-type`伪类选择器的核心用法与实际价值——它并非选择父元素的最后一个子元素，而是精准定位同标签类型中最后出现的那个元素，例如在混排的段落、文本等不同标签中单独选中最后一个``或``，从而轻松实现去除末项边框、调整间距、优化响应式排版等高频样式需求；文章通过直观HTML示例、实用CSS代码和典型场景说明，帮助开发者避开按位置或类名误用的常见陷阱，真正掌握这一灵活又强大的样式控制利器。
:last-of-type 是 CSS 中的一个伪类选择器，用于选择父元素中同类型中的最后一个子元素。它不是简单地选择最后一个子元素，而是根据元素的标签类型来判断。
基本语法
selector:last-of-type { 样式声明 }这个选择器会匹配指定类型的元素中，在其父容器内是该类型最后一个出现的元素。
实际用法示例
假设你有如下 HTML 结构：
段落 1
段落 2
文本 1
段落 3
文本 2
如果你想选中最后一个 元素（即“段落 3”），可以这样写：
color: red;
}
这里虽然 同样， 例如，下面这段代码可以去掉同类型按钮中最后一个的右边距： :last-of-type 是基于元素类型的，不是基于类名或位置。比如： 这两个都是 如果你希望按 终于介绍完啦！小伙伴们，这篇关于《CSS选择最后一个子元素的方法是使用:last-child伪类选择器。这个选择器可以匹配作为其父元素最后一个子元素的元素。示例代码：.parent>:last-child{/*样式规则*/}说明：.parent是父元素的类名。>表示直接子元素（即只选父元素的直接子元素，不包括更深层的后代元素）。:last-child匹配的是父元素中的最后一个子元素。注意事项：如果你只想选最后一个特定类型的子元素（例如最后一个 不是整个 p 类型中的最后一个，因此会被选中。
span:last-of-type 会选择“文本 2”，因为它是 span 类型的最后一个。常见使用场景
margin-right: 0;
}
注意事项
div 类型，所以 div:last-of-type 会选中第二个。class 区分，CSS 没有直接的 :last-of-class，需要借助其他方式，比如给最后一个添加特定类名，或使用 JS 控制。:last-of-type 能帮你更灵活地处理结构复杂的 DOM 样式问题。
