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

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

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

什么是 :first-child 和 :last-child

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

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

基本语法与用法

• li:first-child { margin-left: 0; } —— 选中作为第一个子元素的 li
• li:last-child { margin-right: 0; } —— 选中作为最后一个子元素的 li
• p:first-child —— 选中父元素内第一个是 p 的子元素

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

实际应用场景

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

立即学习“前端免费学习笔记（深入）”；

有道智云AI开放平台

有道智云AI开放平台

116

查看详情

• 在水平导航栏中，去除第一项的左外边距和最后一项的右外边距
• 在图文列表中，为第一个项目添加醒目样式，突出显示
• 在评论列表中，只给最后一个回复加底部留白

示例代码：

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

注意事项与兼容性

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

• 必须确保目标元素确实是其父容器的“第一个”或“最后一个”子节点
• 空格或注释节点一般不影响，但结构错误会导致选择失败
• 若中间插入了其他类型元素（如 span），可能影响匹配结果

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

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

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