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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-27

浏览次数：次

返回列表

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

css伪类:first-of-type与:last-child组合如何调整列表样式_使用: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。

处理只有一个元素的情况

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

语鲸

AI智能阅读辅助工具

314 查看详情

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

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