:first-child 可精准选中父元素下首个子元素，常用于列表、导航或段落排版；通过调整首项样式如字体、边距，可避免顶部多余空白、突出显示内容，提升页面视觉层次与布局合理性。
:first-child 是CSS中一个非常实用的伪类选择器，它能选中父元素下的第一个子元素。这个选择器在处理列表、导航栏或段落排版时特别有用，可以精准控制首个元素的样式，比如调整边距（margin）和字体（font）属性，避免页面头部出现多余空白或统一视觉节奏。
使用 :first-child 选择首个子元素
当多个相同类型的元素被包裹在同一个父容器中时，:first-child 可以单独选中其中第一个。例如，在一个 的样式与众不同，就可以这样写：
li:first-child {
font-weight: bold;
color: #333;
}
这段代码会让列表中的第一项文字加粗并加深颜色，提升可读性或突出显示。
用 :first-child 去除首元素的上边距
在排版中，常常会给段落（p）设置上下边距来增加行间呼吸感。但第一个段落位于内容区顶部时，上方的 margin 可能会造成不必要的留白。这时可以用 :first-child 把它去掉：
立即学习“前端免费学习笔记（深入）”；
p {
margin: 20px 0;
}
p:first-child {
margin-top: 0;
}
这样所有段落保持默认间距，只有第一个段落顶部紧贴容器，布局更紧凑合理。
结合字体样式优化首项外观
除了调整间距，你还可以通过 :first-child 给首个元素赋予独特的字体风格。比如在文章开头的第一个段落使用更大的字号或特殊字重，营造层次感：
.article p:first-child {
font-size: 1.2em;
font-family: "Georgia", serif;
}
这种做法常见于博客或新闻网站，增强首段吸引力，同时不影响后续内容的一致性。
基本上就这些。合理使用 :first-child 能让你的页面细节更精致，特别是在处理重复结构时，既能保持整体统一，又能灵活控制起点样式。不复杂但容易忽略。
