:first-child 伪类选择父元素中第一个子元素，且该子元素需匹配指定选择器。例如 p:first-child 选中作为首个子元素的 p 标签；若首个子元素为其他类型（如 h2），则 p:first-child 不生效，此时可用 p:first-of-type 选中首个 p 类型元素。样式应用需注意子元素实际顺序，:first-child 基于位置而非类型，结合 :first-of-type 更灵活可靠。
使用 CSS 的 :first-child 伪类可以选择父元素中的第一个子元素。只要该子元素匹配选择器，样式就会生效。
selector:first-child 表示选中作为其父元素第一个子元素的指定元素。
例如：
p 的元素。div 的元素。假设 HTML 结构如下：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <p>这是第一段</p> <p>这是第二段</p> <p>这是第三段</p> </div>
你想给第一个 p 元素加粗：
.container p:first-child {
font-weight: bold;
}
这段代码的意思是：在 .container 内，选中第一个子元素并且是 p 的元素，应用加粗样式。
:first-child 关注的是“是否为第一个子元素”，而不仅仅是“第一个同类元素”。
比如下面这个结构：
<div class="box"> <h2>标题</h2> <p>第一段文字</p> <p>第二段文字</p> </div>
如果你写 p:first-child，不会生效，因为第一个子元素是 h2，不是 p。
要选中第一个 p 元素，可以考虑使用 :first-of-type：
.box p:first-of-type {
color: red;
}
这样即使前面有其他标签，只要是第一个 p 类型，就能被选中。
:first-child 是根据位置来选择的——必须是父元素的第一个子节点，并且符合前面的元素类型选择器。如果不确定子元素顺序，建议结合 :first-of-type 使用更灵活的选择方式。
基本上就这些，不复杂但容易忽略细节。
以上就是如何用css :first-child选择第一个子元素的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
750
收藏
