CSS last-of-type选择器如何选中同类型最后一个元素并控制列表尾部样式

CSS中的last-of-type选择器是结构伪类选择器的重要成员，它的核心作用是匹配父元素内指定元素类型的最后一个子元素，在列表样式控制、同类元素末尾样式差异化设置等场景中应用非常广泛。

last-of-type选择器的基本语法

last-of-type选择器的语法格式非常简单，基本结构如下：

/* 选中父元素下所有指定类型的最后一个子元素 */
父元素 子元素类型:last-of-type {
    样式属性: 属性值;
}

这里的子元素类型可以是任意HTML元素标签名，比如li、p、div等，选择器会精准匹配父元素下该类型标签的最后一个实例。

和last-child选择器的核心区别

很多开发者容易混淆last-of-type和last-child，两者的核心差异在于匹配逻辑：

• last-child：匹配父元素的最后一个子元素，不管这个子元素是什么类型，只要它是父元素的最后一个孩子就会生效
• last-of-type：匹配父元素下指定类型的最后一个子元素，不管这个元素是不是父元素的最后一个孩子，只要它是该类型的最后一个就会生效

我们通过一个简单的示例来直观对比两者的差异：

<div class="container">
    <p>第一个段落</p>
    <span>第一个span</span>
    <p>第二个段落</p>
    <span>第二个span</span>
</div>

/* last-child匹配的是container的最后一个子元素，也就是第二个span */
.container :last-child {
    color: red;
}

/* last-of-type匹配的是container下p类型的最后一个（第二个p）和span类型的最后一个（第二个span） */
.container p:last-of-type {
    font-weight: bold;
}
.container span:last-of-type {
    text-decoration: underline;
}

用last-of-type控制列表尾部样式

列表场景是last-of-type最常见的应用场景，比如我们需要给无序列表的最后一个列表项去掉底部边框，或者调整最后一个列表项的下边距，都可以用该选择器实现。

无序列表尾部样式控制示例

假设我们有一个导航列表，每个列表项都有底部边框，我们希望最后一个列表项没有底部边框：

<ul class="nav-list">
    <li>首页</li>
    <li>产品中心</li>
    <li>关于我们</li>
    <li>联系我们</li>
</ul>

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 200px;
}

.nav-list li {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e5e5;
}

/* 选中nav-list下最后一个li元素，去除底部边框 */
.nav-list li:last-of-type {
    border-bottom: none;
    color: #1890ff;
}

混合内容列表的匹配示例

如果列表中混合了其他类型的元素，last-of-type依然可以精准匹配指定类型的最后一个元素：

<ul class="mixed-list">
    <li>列表项1</li>
    <li>列表项2</li>
    <div class="list-divider">分割线</div>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

.mixed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mixed-list li {
    padding: 10px;
    margin-bottom: 8px;
    background-color: #f5f5f5;
}

/* 即使列表中间有其他元素，依然能选中最后一个li */
.mixed-list li:last-of-type {
    margin-bottom: 0;
    background-color: #e6f7ff;
}

使用注意事项

• last-of-type选择器的类型是严格匹配元素标签名的，不能匹配自定义的类名或者id，比如.item:last-of-type是无效写法，需要写成li:last-of-type再结合类选择器调整
• 如果父元素下没有指定的元素类型，该选择器不会匹配任何元素，也不会报错
• 该选择器是CSS3新增的选择器，在IE8及以下版本的浏览器中不支持，如果需要兼容旧浏览器，需要改用其他方案比如给最后一个元素添加专属类名

注意：如果使用JavaScript动态给列表添加或删除元素，last-of-type选择器会自动匹配最新的最后一个同类型元素，不需要手动修改样式类名，这也是它相比手动添加类的优势所在。

CSSlast-of-type选择器列表样式修改时间：2026-07-02 01:27:31