: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。
处理只有一个元素的情况
当列表只有一项时，这一项既是第一个也是最后一个。此时希望它同时具备首尾样式，甚至避免重复边框或间距。可以这样写：
<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 更可靠，因为它只关注同类型元素。
基本上就这些。掌握这两个伪类的组合逻辑，能让你更精细地控制列表结构样式，尤其在处理动态渲染内容时非常实用。不复杂但容易忽略细节。
