使用 :first-child 和 :last-child 可精确控制列表项边框，避免首尾多余线条；通过组合两者处理单一子元素情况，确保样式在动态内容下依然健壮，无需额外类名或JavaScript。
在CSS中，使用 :first-child 和 :last-child 伪类可以精准控制列表项的边框样式，尤其适用于为列表添加分隔线时避免首尾多余的线条。通过组合使用这两个伪类，甚至同时匹配 :first-child:last-child 的特殊情况，可以让样式更灵活、更健壮。
使用 :first-child 和 :last-child 去除首尾边框
常见场景是为列表项之间添加上下或左右边框作为分隔，但不希望第一个或最后一个元素显示边框。
例如，一个水平排列的导航菜单，用右边框分隔每个菜单项：HTML结构：
<ul class="nav"> <li>首页</li> <li>产品</li> <li>关于</li> </ul>
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.nav li {
border-right: 1px solid #ccc;
}
<p>.nav li:first-child {
border-left: 1px solid #ccc; /<em> 可选：给第一个加左边框 </em>/
}</p><p>.nav li:last-child {
border-right: none; /<em> 最后一个去掉右边框 </em>/
}</p>这样，只有中间的项目有右边框，末尾的被去除，视觉上更整洁。
处理只有一个子元素的情况：:first-child:last-child
当列表可能只包含一个项目时，它既是第一个也是最后一个。如果不做处理，前面的规则可能导致边框被错误移除或保留。
li，那么 :last-child 会移除其右边框，但我们可能仍希望它显示完整边框或特殊样式。可以通过同时选择两个伪类来专门处理这种情形：
.nav li:first-child:last-child {
border-right: 1px solid #ccc; /* 单个元素时恢复右边框 */
padding: 10px 20px; /* 或者设置不同的内边距 */
}
这个选择器的意思是：“如果这个元素既是第一个也是最后一个子元素”，即列表中仅有一个项目时应用该样式。你可以用它来重置边框、调整间距或应用独立样式。
结合使用提升样式的健壮性
为了确保无论列表有几个项目，样式都表现一致，建议将三类规则结合：
- 默认样式：给所有列表项设置基础边框
- 去除末尾多余边框：用
:last-child移除最后一个的分隔线 - 处理单一元素情况：用
:first-child:last-child恢复或自定义样式
完整示例：
.nav li {
border-right: 1px solid #ddd;
padding: 8px 12px;
}
<p>.nav li:last-child:not(:first-child) {
border-right: none;
}</p><p>/<em> 可简写为：单独处理只有一个 item 的情况 </em>/
.nav li:first-child:last-child {
border-right: 1px solid #ddd; /<em> 确保单个元素仍有边框（可按需调整） </em>/
}</p>基本上就这些。合理利用 :first-child、:last-child 以及它们的组合形式，能让你的列表边框控制更加精确，适应动态内容变化，无需依赖JavaScript或额外类名。
