动态插入元素不是:first-child，因其严格匹配父元素第一个子节点且类型一致；若插入前已有文本、注释或其他节点，或未用prepend/insertadjacentelement置顶，则无法满足条件，此时应优先使用:first-of-type。
动态插入的元素为什么不是 :first-child
因为 :first-child 匹配的是 DOM 树中「父元素的第一个子节点」，而 JS 动态插入时，如果没控制插入位置或插入前已有其他节点（哪怕只是空格、换行、注释），目标元素就不可能是第一个子节点。
常见现象：用 innerHTML 或 append() 批量插入多个 <li>，但发现 li:first-child 样式没生效；或者 Vue/React 渲染后，div.item:first-child 突然不加粗了。
- 检查开发者工具里父元素的
childNodes（不只是children），你会发现第一个节点可能是Text或Comment -
appendChild()插入单个元素时，它确实是最后一个子节点，但不保证是第一个 -
insertAdjacentHTML('afterbegin', ...)才可能让它成为第一个子节点——但前提是父元素当前为空或开头无空白
用 insertAdjacentElement 或 prepend() 强制置顶
想让新元素稳稳当当成为 :first-child，不能依赖“插入后自然排第一”，得主动把它塞到最前面。
推荐写法：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
const newLi = document.createElement('li');
newLi.textContent = '新增项';
// ✅ 正确：插入到父元素最开头，无视原有空白
ul.prepend(newLi);
// ✅ 替代方案（兼容性稍差，IE 不支持）
ul.insertAdjacentElement('afterbegin', newLi);
// ❌ 避免：innerHTML 会清空再重写，破坏事件绑定，且易引入空白
ul.innerHTML = '
注意：prepend() 在 IE 中完全不可用，如需兼容，必须用 insertBefore(新节点, 父节点.firstChild)。
为什么 :first-of-type 更适合动态场景
多数时候你真正想要的，不是“DOM 第一个子节点”，而是“这一类元素里的第一个”。比如列表里第一个 <li>，不管前面有没有 <div> 或注释。
<ul>
<li>
<code>li:first-child：要求 <li> 是 <ul></ul> 的第一个子节点 → 容易被破坏
li:first-of-type：只要它是所有 <li> 中第一个出现的 → 对插入顺序、空白节点、兄弟元素类型都不敏感v-for 或 map() 渲染时，几乎总该用 :first-of-type 替代 :first-child
检查和验证 DOM 结构的实操步骤
别猜，直接看真实 DOM 节点顺序。打开控制台，执行这几行就能快速定位问题：
const parent = document.querySelector('.my-list');
console.log('所有子节点（含文本/注释）:', parent.childNodes);
console.log('仅元素子节点:', parent.children);
console.log('第一个子节点类型:', parent.childNodes[0]?.nodeType === 3 ? 'Text' : parent.childNodes[0]?.nodeName);
如果 childNodes[0] 是文本节点（nodeType === 3），那任何 :first-child 都不会命中——这点在服务端渲染或模板引擎（如 Pug、Vue SFC）中尤其高频。
真正麻烦的不是语法写错，而是你以为的 HTML 结构和浏览器实际解析出来的 DOM 结构之间，隔着几个看不见的空格和换行。
