:nth-child 失效是因为它匹配物理子节点序号而非业务逻辑序号，JS 动态插入会改变 DOM 树结构，导致原序号错位；应改用 JS 控制类名或 MutationObserver 自动更新样式。
直接用 :nth-child 或依赖 DOM 位置的伪类选择器去匹配异步插入的节点，注定会出问题——它不认“第几个业务项”，只认“第几个子节点”，而 JS 插入会立刻改变这个物理顺序。
为什么 :nth-child 在动态插入后“失效”
它根本没失效，只是你写的序号和真实 DOM 子节点索引对不上了。浏览器不会重算 :nth-child 的匹配逻辑，哪怕你触发重排、重绘、甚至强制刷新样式计算（getComputedStyle），它依然按当前树结构静态匹配。
- JS
prepend()一个新li，原来:nth-child(2)匹配的元素就变成第 3 个子节点，规则自然跳过 -
innerHTML +=追加时，HTML 中的换行/空格会被解析为文本节点，计入子节点计数，导致目标元素实际是第 4、6、8…个子节点 - Vue/React 渲染后常插入注释节点（如
<!--v-if-->）或包装<div>，让原本第 2 个li变成第 5 个子节点 -
:nth-of-type看似更稳，但它只按标签名计数，无法处理混合结构（比如中间夹着<div class="separator">），且同样受插入影响
用 JS 主动控制类名替代伪类
把序号判断权交还给 JS，比硬扛 CSS 伪类更可靠、更可控。
- 每次插入/删除后，执行
document.querySelectorAll('ul li')，遍历并按index % 2 === 0手动添加row-even/row-odd类 - 用
MutationObserver监听父容器的childList变化，自动重跑上述逻辑，覆盖分页加载、拖拽排序等异步场景 - 如果只是临时样式（比如 hover 高亮当前项），直接写
el.style.backgroundColor = '#f0f0f0'，跳过选择器层，零延迟、零干扰
避免在属性选择器里漏掉引号或大小写
异步插入的节点若带动态属性（如 data-id="123abc" 或 type="text"），CSS 属性选择器极易因格式不一致而失配。
立即学习“前端免费学习笔记（深入）”；
-
div[data-id=123abc]在大多数现代浏览器中会失败，必须写成div[data-id='123abc']—— 因为以数字开头的无引号值不是合法 CSS 标识符 -
input[type='TEXT']不会匹配<input type="text">，除非加i标志：input[type='text' i]（注意：IE 不支持） - 布尔属性（如
disabled、required）应使用[disabled]，而不是[disabled="true"]—— JS 设置el.disabled = true只添加属性，不设值
最容易被忽略的是：你写的 :nth-child(2) 并不表示“第二个业务项”，而是“父元素下第 2 个子节点，且恰好是 li”。只要中间混进一个文本节点、注释或其它标签，它就断了——这不是 bug，是设计如此。
