在构建导航栏时，我们通常会为每个导航项添加右边距，以实现它们之间的间隔。然而，最后一个导航项往往不需要右边距，否则会影响整体布局的美观性。本文将介绍如何使用 CSS 的 :last-child 伪类来解决这个问题，而无需为最后一个导航项添加额外的 class。
首先，让我们看一个典型的导航栏 HTML 结构：
<div>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item"><a href="#home">Home</a></li>
<li class="nav-item"><a href="#about">About</a></li>
<li class="nav-item"><a href="#work">Work</a></li>
<li class="nav-item"><a href="#services">Services</a></li>
<li class="nav-item"><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>以及对应的 CSS 样式：
.navbar {
text-decoration: none;
margin-bottom: 150px;
}
.nav-item {
display: inline-block;
text-decoration: none;
}
.nav-list {
text-align: center;
}
.nav-list li a {
text-decoration: none;
margin-right: 100px;
}
.nav-list li a:active {
color: #000;
}
.nav-list li a:visited {
color: #000;
}这段代码会为每个 nav-list 下的 li 元素中的 a 标签添加 100px 的右边距。现在，我们需要移除最后一个 nav-item 的右边距。
立即学习“前端免费学习笔记（深入）”；
使用 :last-child 伪类
:last-child 伪类选择器用于选取属于其父元素的最后一个子元素的元素。 因此，我们可以使用以下 CSS 规则来移除最后一个导航项的右边距：
.nav-item:last-child a {
margin-right: 0;
}这条规则的含义是：选择 class 为 nav-item 的元素，并且该元素是其父元素的最后一个子元素，然后选择该元素下的 a 标签，并将其右边距设置为 0。
完整 CSS 代码
将以上 CSS 规则添加到原有的样式表中，完整的 CSS 代码如下：
.navbar {
text-decoration: none;
margin-bottom: 150px;
}
.nav-item {
display: inline-block;
text-decoration: none;
}
.nav-list {
text-align: center;
}
.nav-list li a {
text-decoration: none;
margin-right: 100px;
}
.nav-list li a:active {
color: #000;
}
.nav-list li a:visited {
color: #000;
}
.nav-item:last-child a {
margin-right: 0;
}HTML 结构注意事项
在编写 HTML 代码时，需要注意标签的嵌套关系。在上述示例中，<a> 标签应该嵌套在 <li> 标签内部，正确的写法是：
<li class="nav-item"><a href="#home">Home</a></li>
而不是：
<li class="nav-item"><a href="#home">Home</li></a>
错误的嵌套会导致浏览器解析错误，影响页面显示效果。
总结
通过使用 CSS 的 :last-child 伪类，我们可以轻松地移除导航栏最后一项的右边距，而无需添加额外的 class。 这种方法简洁高效，可以提高代码的可维护性。同时，编写规范的 HTML 代码也是保证页面正常显示的关键。
