:first-child不生效的主因是目标元素并非父元素的第一个子节点，因空白文本或注释节点被计入DOM；应检查开发者工具确认结构，或改用:first-of-type、修正空格、排查优先级与JS动态插入影响。
:first-child 选择器不生效，最常见的原因是它匹配的不是你“以为的第一个子元素”，而是严格按 HTML 结构中**父元素下的第一个子节点**来判断的。它不看元素类型，只看 DOM 树中的位置顺序。
确认目标元素确实是父元素的第一个子元素
比如以下 HTML：
<ul> <!-- 注释或空格文本节点也会算作子节点 --> <li>首页</li> <li>关于</li> </ul>
如果 <ul> 开头有换行、空格或注释，浏览器会把它们解析为文本节点（或注释节点），那么 <li> 就不是 :first-child 了。
- 用浏览器开发者工具（F12）展开父元素，查看其子节点列表，确认第一个是否真是你要选的元素
- 若存在空白文本节点，可删掉多余换行/空格，或改用 :first-of-type
区分 :first-child 和 :first-of-type
:first-child 要求元素既是第一个子节点，又要是指定标签；:first-of-type 只要求是该类型中第一个出现的，对前面的其他标签不敏感。
立即学习“前端免费学习笔记（深入）”；
- 想选
<p>中第一个<em>？用p em:first-of-type - 想选整个列表里第一个
<li>，且它必须是<ul>下第一个子元素？才用ul li:first-child - 多数场景下，
:first-of-type更符合直觉，也更稳定
检查 CSS 优先级和拼写错误
即使结构正确，样式也可能被覆盖或写错：
- 确认选择器拼写是
:first-child（不是:firstchild或::first-child—— 伪类用单冒号） - 检查是否有更高级别的规则（如 class、id 或内联样式）覆盖了你的
:first-child样式 - 在开发者工具中看该样式是否被划掉，被划掉说明被覆盖，点击右侧可追踪来源
注意动态内容或 JS 插入的影响
如果元素是 JS 动态插入的，要确保 CSS 规则在插入前已加载，且插入时结构符合 :first-child 的条件。
- 例如用
innerHTML插入多个<li>，但没包裹在<ul>内，或插入后第一个子节点不是目标元素 - 可改用 JS 直接添加 class（如
el.classList.add('first')），再用.first控制样式，更可控
