• 用浏览器开发者工具（F12）展开父元素，查看其子节点列表，确认第一个是否真是你要选的元素
• 若存在空白文本节点，可删掉多余换行/空格，或改用 :first-of-type

区分 :first-child 和 :first-of-type

:first-child 要求元素既是第一个子节点，又要是指定标签；:first-of-type 只要求是该类型中第一个出现的，对前面的其他标签不敏感。

• 想选
  中第一个 ？用 p em:first-of-type
• 想选整个列表里第一个
• ，且它必须是
  下第一个子元素？才用 ul li:first-child
• 多数场景下，:first-of-type 更符合直觉，也更稳定

检查 CSS 优先级和拼写错误

即使结构正确，样式也可能被覆盖或写错：

• 确认选择器拼写是 :first-child（不是 :firstchild 或 ::first-child —— 伪类用单冒号）
• 检查是否有更高级别的规则（如 class、id 或内联样式）覆盖了你的 :first-child 样式
• 在开发者工具中看该样式是否被划掉，被划掉说明被覆盖，点击右侧可追踪来源

注意动态内容或 JS 插入的影响

如果元素是 JS 动态插入的，要确保 CSS 规则在插入前已加载，且插入时结构符合 :first-child 的条件。

• 例如用 innerHTML 插入多个
• ，但没包裹在
  内，或插入后第一个子节点不是目标元素
• 可改用 JS 直接添加 class（如 el.classList.add('first')），再用 .first 控制样式，更可控