:first-child 可精准选中父元素下首个子元素，常用于列表、导航或段落排版；通过调整首项样式如字体、边距，可避免顶部多余空白、突出显示内容，提升页面视觉层次与布局合理性。
:first-child 是CSS中一个非常实用的伪类选择器，它能选中父元素下的第一个子元素。这个选择器在处理列表、导航栏或段落排版时特别有用，可以精准控制首个元素的样式，比如调整边距（margin）和字体（font）属性，避免页面头部出现多余空白或统一视觉节奏。
当多个相同类型的元素被包裹在同一个父容器中时，:first-child 可以单独选中其中第一个。例如，在一个 <ul> 列表中，你想让第一个 <li> 的样式与众不同，就可以这样写：
li:first-child {
font-weight: bold;
color: #333;
}
这段代码会让列表中的第一项文字加粗并加深颜色，提升可读性或突出显示。
在排版中，常常会给段落（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 能让你的页面细节更精致，特别是在处理重复结构时，既能保持整体统一，又能灵活控制起点样式。不复杂但容易忽略。
以上就是如何在CSS中使用伪类:first-child选择首个元素_结合:first-child调整边距和字体的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
949
收藏
