- A+
:first-child 和 :last-child 是 CSS 中常用的结构性伪类，用于选中父元素下的第一个或最后一个子元素。它们在样式布局、列表美化、表格设计等场景中非常实用。虽然名称相似，但作用位置和使用细节有明显区别。
基本定义与语法
两者都属于“基于位置”的伪类，依赖于元素在其父容器中的顺序位置。
- :first-child：匹配父元素中的第一个子元素，且该子元素必须是指定的标签或满足选择器条件。
- :last-child：匹配父元素中的最后一个子元素，同样需满足选择器条件。
示例：
/* 选中列表中的第一项 */
li:first-child { color: red; }
/ 选中列表中的最后一项 /
li:last-child { color: blue; }
实际应用场景
这两个伪类常用于去除默认间距、添加分隔线、控制按钮组样式等。
1. 列表项之间的分隔线处理
立即学习“前端免费学习笔记（深入）”；
在水平导航栏或行内列表中，常需要在每项之间加边框，但首项前或末项后不需要。
/ 在每一项左边加边框，去掉第一项的边框 /
.nav li { border-left: 1px solid #ccc; }
.nav li:first-child { border-left: none; }
或者反过来，只给最后一项特殊样式（如提示箭头）：
.breadcrumb span:last-child { font-weight: bold; }
2. 表格样式的优化
对表格的首行或末行设置不同背景色：
tr:first-child td { background-color: #f0f0f0; }
tr:last-child td { border-bottom: 2px solid #333; }
专门为Phtoshop打造的AIGC绘画插件
153
查看详情
3. 表单控件微调
在一组输入框中，取消第一个的上边距或最后一个的下边距：
.input-group input:first-child { margin-top: 0; }
.input-group input:last-child { margin-bottom: 0; }
常见误区与注意事项
使用时需注意选择器的精确性，避免因 DOM 结构变化导致失效。
- 如果父元素的第一个子节点不是目标标签，:first-child 不会匹配。例如，一个
<p>后面跟着<div>，则p:first-child只有在它是第一个子元素时才生效。 - 两者都是基于兄弟节点的位置，不关心元素类型是否相同。
- 若想按类型匹配首个/末个元素，应使用
:first-of-type或:last-of-type。
举例：
假设结构为：
<div>
<p>段落</p>
<p>第二个段落</p>
</div>
此时 p:first-child 能匹配第一个 p，因为它确实是第一个子元素。
但如果结构变为：
<div>
<h2>标题</h2>
<p>段落</p>
</div>
那么 p:first-child 将不生效，因为 p 不是第一个子元素。
总结
:first-child 和 :last-child 是简洁高效的定位工具，适用于多数基于位置的样式控制。关键在于理解其匹配逻辑——依据的是元素在父容器中的顺序位置，而非类型或内容。合理使用可减少不必要的类名，提升代码可维护性。
基本上就这些，掌握它们能让你的 CSS 更加灵活和语义化。
