如何使用:last-child去除导航栏最后一项的右侧外边距

样式不生效是两处代码错误共同导致的，不需要给Contact项额外添加类名即可修复：

• HTML标签嵌套混乱：所有导航项的<a>闭合标签位置错误，你当前写的是<li class="nav-item"><a href="#xxx">文本</li></a>，</a>被放到了</li>外层，浏览器解析DOM时会自动修正错误结构，最终导致选择器匹配不符合预期。
• CSS选择器逻辑错误：你写的.nav-list ul li a:last-child和实际DOM结构不匹配：.nav-list本身就是最外层的ul标签，内部没有嵌套其他ul；同时每个li里只有一个a标签，a:last-child会选中所有a元素，根本定位不到最后一个导航项。

修复方法 #

方法1：修正结构和选择器

首先修正所有导航项的标签嵌套，保证<a>标签完全被包裹在<li>内部：

<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>

然后把原来错误的清除外边距规则替换为正确选择器，选中最后一个li内部的a标签：

/* 删除原有错误的 .nav-list ul li a:last-child 规则，添加下方代码 */
.nav-list li:last-child a {
  margin-right: 0;
}

方法2：从根源避免最后一项边距问题（更推荐）

不需要单独给最后一项写覆盖样式，改用相邻兄弟选择器，只给非首个导航项加左侧外边距，就不会出现最后一项右侧多余空隙的问题：

/* 替换原有给所有a加margin-right的规则 */
.nav-list li a {
  text-decoration: none;
}
/* 匹配前面存在同级li的导航项，添加左侧边距 */
.nav-list li + li a {
  margin-left: 100px;
}

这种写法不需要考虑最后一项的特殊处理，后续增减导航项也不需要修改CSS，维护成本更低。

内容的提问来源于stack exchange，提问作者derrickogole