17370845950

: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 直观验证。