CSS如何选中第一个子元素

:first-of-type 才是按类型找“第一个”

当你真正想选中「父元素中同类型元素里的第一个」，应该用 :first-of-type。它不关心前面有没有其他标签，只看当前元素类型在兄弟中是否排第一。

常见使用场景：

• 列表中第一个
• （不管前面有没有

  或注释节点）

• 卡片容器里第一个
  ，即使前面有
• 表单中第一个 <input type="text">，忽略 和

示例：

<section>
  <h2>标题</h2>
  <p>段落1</p>
  <p>段落2</p>
</section>

p:first-child ❌ 不生效（

不是第一个子节点）
p:first-of-type ✅ 生效（它是所有

中的第一个）

注意空格、注释和文本节点的影响

CSS 结构伪类只看「元素节点」，但 DOM 树里可能夹着文本节点（比如换行缩进）、HTML 注释 ，这些都会影响 :first-child 的判断。

容易踩的坑：

• 写成多行 HTML 时，
  \n A\n B\n
  —— 开头换行会生成一个文本节点，导致 span:first-child 失效
• Vue/React 模板中动态插入注释（如 v-if 编译残留），也可能让 :first-child 错位
• 服务端渲染或预处理后，空白字符未压缩，同样干扰结构判断

调试建议：打开浏览器开发者工具，右键检查父元素 → 「Elements」面板里观察实际子节点顺序（包括「#text」节点）。

更严格的定位：用 :nth-child(1) 还是 :nth-of-type(1)？

二者语义和行为与对应的第一类伪类完全一致：:nth-child(1) ≡ :first-child，:nth-of-type(1) ≡ :first-of-type。区别只在可读性和扩展性：

• 如果后续可能需要选第 2 个、偶数个，统一用 :nth-of-type(n) 更易维护
• :nth-child(1) 在部分老版本 iOS Safari 中兼容性略差（虽已基本不用考虑）
• 不要混用：比如 div:nth-child(1) 和 div:first-of-type 表现不同，别凭感觉替换

真正复杂的情况往往不是「第一个」，而是「第一个非空内容块」「第一个带 data-role 的元素」——这时候就得结合属性选择器或 JS 辅助了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~