如何选择第一个和最后一个元素_CSS:first-child与:last-child应用

新闻中心 NEWS CENTER

2025-11-23

浏览次数：次

:first-child和:last-child用于选中父元素内的首个和末尾子元素，常用于去除列表首尾边距、优化布局；需确保目标元素确为第一个或最后一个子节点，否则无法匹配。

如何选择第一个和最后一个元素_css:first-child与:last-child应用

在网页开发中，经常需要对列表或容器中的第一个和最后一个子元素进行特殊样式处理。CSS 提供了 :first-child 和 :last-child 伪类选择器，让我们可以轻松定位并设置这些元素的样式，而无需添加额外的类名。

:first-child 匹配父元素中的第一个子元素，前提是该元素符合选择器条件。
:last-child 则匹配父元素中的最后一个子元素。

例如，你想让导航菜单的第一项左边距为0，最后一项右边距为0，就可以使用这两个伪类来实现。

常见写法如下：

注意：如果第一个子元素不是指定标签，比如第一个是 div 而你写的是 p:first-child，则不会匹配任何元素。

常用于去除列表项之间的多余边距或边框，提升布局美观性。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

示例代码：

n* ul li {
  display: inline-block;
  margin: 0 10px;
}
n* ul li:first-child {
  margin-left: 0;
}
n* ul li:last-child {
  margin-right: 0;
}

虽然现代浏览器都支持这两个伪类，但仍需注意以下几点：

对于更精确的控制，可考虑使用 :first-of-type 或 :last-of-type，它们基于标签类型而非位置顺序。

基本上就这些。掌握 :first-child 和 :last-child 能让你的 CSS 更简洁高效，减少不必要的 class 滥用。

以上就是如何选择第一个和最后一个元素_CSS:first-child与:last-child应用的详细内容，更多请关注其它相关文章！