CSS伪类:last-child如何设置最后一个元素样式_使用:last-child修改末项布局

:last-child 是 CSS 中一个非常实用的伪类选择器，用于选中父元素下的“最后一个子元素”。它在处理列表、导航菜单、卡片布局等场景时特别有用，能帮助我们精准地为末尾项设置特定样式，比如去除多余的分割线、调整边距或改变背景色。

什么是 :last-child

这个伪类匹配其父元素中排在最后位置的子元素。只要目标元素是其父级的最后一个直接子节点，就会被选中，不管它的标签类型是什么。
例如，在一个无序列表中，你想让最后一个 li 不显示下边框，就可以使用 :last-child 实现：

li:last-child { border-bottom: none; }

常见使用场景

以下是几个典型的实际应用方式：

• 移除列表最后一项的分隔线：很多列表项之间用 border-bottom 分隔，末项通常不需要。
• 调整间距：避免最后一个元素与容器底部距离过大。
• 特殊视觉效果：如高亮最后一个选项、修改按钮样式等。

示例代码：

BetterYeah AI

基于企业知识库构建、训练AI Agent的智能体应用开发平台，赋能客服、营销、销售场景 -BetterYeah

110

查看详情

    .list-item {<br>
       padding-bottom: 10px;<br>
       margin-bottom: 10px;<br>
       border-bottom: 1px solid #ddd;<br>
    }<br><br>
    .list-item:last-child {<br>
       border-bottom: none;<br>
       margin-bottom: 0;<br>
    }
  

注意事项与兼容性

虽然

:last-child</font>
<font>现代主流浏览器都支持该伪类（包括 IE9+），但在一些老项目中若需兼容 IE8，就不能使用。</font>
<ul>
  <li>必须确保目标元素确实是父元素的最后一个子节点，否则不会生效。</li>
  <li>如果最后一个子元素不是你想要的标签（比如末尾是个 <code>div