CSS选第一个和最后一个元素的方法如下：1.选择第一个子元素使用:first-child伪类选择器：.parent>:first-child{/*样式*/}这会选中.parent容器中的第一个子元素。2.选择最后一个子元素使用:last-child伪类选择器：.parent>:last-child{/*样式*/}这会选中.parent容器中的最后一个子元素。3.结合使用：同时选第一个和

想要精准控制网页元素样式？本文为你详细解读CSS伪类选择器`:first-child`和`:last-child`的用法，助你轻松选取父元素中的第一个和最后一个子元素，实现更精细化的页面布局。告别繁琐的类名添加，利用`:first-child`和`:last-child`去除列表首尾边距，优化导航栏、图文列表等常见网页组件的视觉效果。文章还包含实用代码示例、注意事项以及兼容性说明，让你快速掌握并应用这两个强大的CSS选择器，提升你的前端开发效率。更深入的控制需求？了解`:first-of-type`和`:last-of-type`的妙用，让你的CSS选择器更加灵活精准。

: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，则不会匹配任何元素。

实际应用场景

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

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

示例代码：

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选第一个和最后一个元素的方法如下：1.选择第一个子元素使用:first-child伪类选择器：.parent>:first-child{/*样式*/}这会选中.parent容器中的第一个子元素。2.选择最后一个子元素使用:last-child伪类选择器：.parent>:last-child{/*样式*/}这会选中.parent容器中的最后一个子元素。3.结合使用：同时选第一个和最后一个.parent>:first-child,.parent>:last-child{/*同时应用样式*/}4.更精确的选择（按类型）如果你只想选第一个

Golang实战：搭建Web服务全攻略

上一篇

Golang实战：搭建Web服务全攻略

下一篇

《蔚蓝档案》爱露礼服全面解析