:first-child选择器匹配父元素下第一个且类型一致的子元素；若首个同类型元素前有其他标签，应改用:nth-of-type(1)；需加父级限定避免全局影响，并注意文本节点干扰。
直接用 :first-child 选择器即可，但要注意它匹配的是父元素下的第一个子元素，且类型需一致（比如你想给第一个 p 加样式，那它必须是其父元素的第一个子元素，且是 p 标签）。
基础写法：精准匹配第一个同类型元素
如果目标是给某个父容器内第一个 p 元素加样式：
p:first-child {
color: red;
font-weight: bold;
}
⚠️ 注意：只有当这个 p 确实是父元素的第一个子节点时才生效。如果前面还有 h2 或空文本节点（如换行缩进），:first-child 就不会命中。
更稳妥方案：用 :nth-of-type(1)
当父元素中第一个 p 前面可能有其他标签（比如 h3、div）时，改用：
立即学习“前端免费学习笔记（深入）”；
p:nth-of-type(1) {
color: blue;
}
✅ 它只看同类型元素的顺序，不管中间夹了什么其他标签，只要它是所有 p 中的第一个，就生效。
只作用于特定容器下的第一个元素
避免全局影响，推荐加上父级限定：
-
.content p:first-child—— 给 class="content" 容器里第一个子元素且是p的元素加样式 -
.list-item:first-child—— 给类名为list-item的元素中，作为其父元素第一个子项的那个加样式
常见误区提醒
❌ :first-child 不等于“页面上第一个该标签”；
❌ 它不区分是否可见（隐藏元素也算在内）；
❌ 空格、换行在 HTML 中可能生成文本节点，导致第一个子节点不是你预期的标签。
调试小技巧：浏览器开发者工具里选中元素，看右键菜单是否显示 “:first-child” 已匹配，或临时加个 outline: 1px solid 直观验证。
