使用 CSS :last-child 伪类移除导航栏最后一项的右边距
在网页导航栏的开发中，我们经常会为导航项设置统一的右边距，让各导航项之间保持合适的间距，提升页面的视觉层次感。但导航栏的最后一个项目通常不需要右边距，否则会导致导航栏整体向右偏移，破坏页面的布局对齐效果。此时可以使用 CSS 的 :last-child 伪类来精准选中最后一个导航项，单独移除它的右边距。
:last-child 伪类简介
:last-child 是 CSS 提供的结构化伪类选择器，用于匹配其父元素下的最后一个子元素。它的匹配规则是：首先找到目标元素的父容器，然后判断该目标元素是否是父容器下的最后一个子节点，如果是则应用对应的样式规则。需要注意的是，:last-child 只匹配同层级下的最后一个元素，不会跨层级匹配。
导航栏右边距的常规设置
在没有处理最后一个导航项右边距的情况下，我们通常会给所有导航项统一设置右边距，示例代码如下：
/* 导航栏容器样式 */
.nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 0; /* 不使用 gap 属性，手动控制间距 */
}
/* 导航项基础样式 */
.nav-item {
padding: 10px 20px;
background-color: #f5f5f5;
margin-right: 15px; /* 统一设置右边距 */
border-radius: 4px;
}对应的 HTML 结构如下：
<ul class="nav"> <li class="nav-item">首页</li> <li class="nav-item">产品中心</li> <li class="nav-item">服务支持</li> <li class="nav-item">关于我们</li> </ul>
此时最后一个导航项“关于我们”也会带有 15px 的右边距，导致导航栏整体右侧出现多余的空白，不符合布局预期。
使用 :last-child 移除最后一项右边距
我们只需要在原有样式的基础上，新增一条针对最后一个导航项的样式规则，使用 :last-child 伪类选中最后一个 .nav-item，将其右边距设置为 0 即可：
/* 原有导航项样式保持不变 */
.nav-item {
padding: 10px 20px;
background-color: #f5f5f5;
margin-right: 15px;
border-radius: 4px;
}
/* 选中父容器 .nav 下的最后一个 .nav-item，移除右边距 */
.nav-item:last-child {
margin-right: 0;
}这条规则会精准匹配 .nav 列表下的最后一个 <li class="nav-item"> 元素，单独将其 margin-right 属性设置为 0，不会影响其他导航项的间距设置。
注意事项
父容器下的最后一个子元素必须同时匹配
:last-child前面的选择器，才会生效。例如如果导航项后面多了一个没有.nav-item类的元素，那么.nav-item:last-child就不会匹配到任何元素，此时可以改用:last-of-type伪类，它会匹配父容器下同类型元素的最后一个。如果导航项使用了动态渲染，只要最后一个渲染出来的
.nav-item是父容器的最后一个子元素，样式依然会生效，不需要额外修改逻辑。不要和
:nth-last-child()混淆，:last-child等价于:nth-last-child(1)，是固定匹配最后一个子元素的语法，可读性更高。
完整示例代码
以下是包含完整 HTML 和 CSS 的示例，可直接运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏最后一项移除右边距示例</title>
<style>
.nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.nav-item {
padding: 10px 20px;
background-color: #f5f5f5;
margin-right: 15px;
border-radius: 4px;
color: #333;
}
.nav-item:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<ul class="nav">
<li class="nav-item">首页</li>
<li class="nav-item">产品中心</li>
<li class="nav-item">服务支持</li>
<li class="nav-item">关于我们</li>
</ul>
</body>
</html>通过这种方法，我们可以很灵活地调整导航栏的间距，保证页面布局的对齐和美观，不需要修改 HTML 结构，仅通过 CSS 选择器的规则就能实现需求，维护性更高。