: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:first-child：选中父元素中第一个子元素且是 p 的元素。 div:first-child：选中父元素中第一个子元素且是 div 的元素。
常见用法示例
假设 HTML 结构如下：
立即学习“前端免费学习笔记（深入）”；
这是第一段
这是第二段
这是第三段
你想给第一个 p 元素加粗：
.container p:first-child { font-weight: bold;}
这段代码的意思是：在 .container 内，选中第一个子元素并且是 p 的元素，应用加粗样式。
注意事项
:first-child 关注的是“是否为第一个子元素”，而不仅仅是“第一个同类元素”。
九歌
九歌–人工智能诗歌写作系统
322 查看详情
比如下面这个结构：
标题
第一段文字
第二段文字
如果你写 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选择第一个子元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1028505.html
微信扫一扫 
支付宝扫一扫 
