CSS伪类:first-of-type与:last-child组合如何调整列表样式_使用:first-of-type last-child控制首尾样式

:first-of-type选择同类型首个元素，:last-child选择父级最后一个子元素；二者可组合使用，如li:first-of-type:last-child匹配唯一列表项，常用于去除首尾边框或调整间距，尤其在动态列表中更精准控制样式。

在CSS中，:first-of-type 和 :last-child 是两个常用的结构伪类，它们可以结合使用来精准控制列表中首项和末项的样式。虽然不能直接写成“:first-of-type last-child”这种组合选择器（这表示同时满足两个条件的元素），但通过合理搭配，可以实现对列表首尾元素的灵活样式调整。

理解:first-of-type与:last-child的区别

:first-of-type 选择其父元素中同类型标签的第一个元素。比如多个 p 标签中，它会选择第一个 p。而 :last-child 选择的是父元素中的最后一个子元素，不论类型。

例如：

• p:first-of-type → 第一个 p 元素
• li:last-child → 列表中最后一个 li

单独设置首项或末项样式

在无序列表中，若想给第一个和最后一个列表项添加特殊样式，可以直接使用：

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

<font face="Consolas, 'Courier New', monospace">
li:first-of-type {
  color: red;
}
li:last-child {
  color: blue;
}
</font>

这段代码会让第一个 li 变红，最后一个变蓝。即使中间插入了其他类型的元素（如 div），:first-of-type 仍能正确识别第一个 li。

Typewise.app

面向客户服务和销售团队的AI写作解决方案。

39

查看详情

处理只有一个元素的情况

当列表只有一项时，这一项既是第一个也是最后一个。此时希望它同时具备首尾样式，甚至避免重复边框或间距。可以这样写：

<font face="Consolas, 'Courier New', monospace">
li:first-of-type:last-child {
  background: #eee;
  border: 1px solid #ccc;
  margin-bottom: 0;
}
</font>

这个选择器表示：既是同类型第一个，又是父级最后一个子元素——也就是唯一的一项。适用于动态内容中可能只返回一条数据的场景。

实用技巧：去除首尾边框或调整间距

常见需求是列表项之间有上边框或下边框，但首项不需要上边框，末项不需要下边框。

• 去掉首项上边框：
  li:first-of-type { border-top: none; }
• 去掉末项下边距：
  li:last-child { margin-bottom: 0; }

如果列表项包含多种标签（如混合了 li 和 div），用 :first-of-type 比 :first-child 更可靠，因为它只关注同类型元素。

基本上就这些。掌握这两个伪类的组合逻辑，能让你更精细地控制列表结构样式，尤其在处理动态渲染内容时非常实用。不复杂但容易忽略细节。

以上就是CSS伪类:first-of-type与:last-child组合如何调整列表样式_使用:first-of-type last-child控制首尾样式的详细内容，更多请关注php中文网其它相关文章！