:first-child选中父元素第一个子元素且类型必须匹配，而:first-of-type选中父元素下首个指定类型元素；二者功能不同，:first-child等价于:nth-child(1)。
要只选中某个父元素下的第一个子元素，用 :first-child 是最直接的方式，但要注意它匹配的是“父元素的第一个子节点”，且**必须是该类型元素**（比如你想选第一个 ，但它前面有个 ，那这个 就不是 :first-child）。
✅ 正确理解 :first-child 的匹配逻辑
:first-child 会选中同时满足两个条件的元素：
- 它是其父元素的第一个子元素（位置上排第一）
- 它的标签名或类型与选择器声明的一致
例如：
此时 p:first-child 不会匹配任何 ，因为第一个子元素是 ，不是 。
✅ 想选“第一个 p 元素”？用 :first-of-type 更稳妥
如果目标是“父容器中第一个出现的某类元素”，而不是“绝对第一个子元素”，推荐用 :first-of-type：
-
p:first-of-type→ 选中父元素下第一个，不管前面有没有其他标签 -
li:first-of-type→ 选中列表中第一个，即使它前面有注释或空格文本节点也不影响（浏览器会忽略纯空白文本节点）
✅ 实际使用小技巧
- 确保 HTML 结构干净：避免在第一个子元素前加空格、换行或注释（虽然现代浏览器通常忽略纯空白文本节点，但某些旧环境可能受影响）
- 调试时可临时加边框：
div > *:first-child { outline: 2px solid red; }快速验证是否命中 - 想排除首行特殊样式？比如导航栏第一个菜单项不加左边距：
.nav-item:first-child { margin-left: 0; }
✅ 和 :nth-child(1) 有什么区别？
:first-child 和 :nth-child(1) 在功能上完全等价，都是指“第一个子元素”。但 :first-child 更语义清晰、书写更简短，推荐优先使用它。
