CSS 中如何用:last-of-type 伪类选择器选取同类型元素的最后一个并设置样式

在网页设计与开发中，CSS 样式的精准控制至关重要。其中，:last-of-type 伪类选择器为开发者提供了一种便捷方式，能够轻松选取同类型元素中的最后一个，并为其设置独特样式。

:last-of-type 伪类选择器的语法简洁明了。假设有一组同类型元素，如多个

元素，想要选取最后一个

元素并设置样式，只需在 CSS 中使用 “p:last-of-type” 这样的选择器表达式。例如：

p:last-of-type {
    color: red;
    font-weight: bold;
}

这段代码会让页面中所有段落元素里的最后一个段落文字变为红色且加粗显示。

这种选择器在实际项目中有广泛应用场景。在一个博客页面中，文章列表通常由多个

元素组成。如果希望最后一篇文章在样式上与其他文章有所区分，比如添加不同的边框样式或者改变背景颜色，就可以借助 :last-of-type 伪类选择器。

article:last-of-type {
    border: 2px solid blue;
    background-color: lightgray;
}

这样，最后一篇文章就会呈现出与其他文章不同的视觉效果，吸引用户的注意力。

在布局设计方面，:last-of-type 伪类选择器也能发挥重要作用。当创建一个水平排列的导航栏，每个导航项由

元素构成时，若想让最后一个导航项与其他项之间有额外的间距，以达到更好的布局效果，可以使用如下代码：

li:last-of-type {
    margin-right: 20px;
}

需要注意的是，:last-of-type 伪类选择器是基于元素的类型进行匹配的。如果页面结构较为复杂，存在多层嵌套的同类型元素，它会在每个父元素的同类型子元素集合中分别寻找最后一个。

通过灵活运用 :last-of-type 伪类选择器，开发者能够更加高效地实现页面的个性化设计，提升用户体验。无论是对文本样式的微调，还是对页面布局的优化，它都为 CSS 样式设计带来了更多的可能性。

万千站长工具