动态排序后，:nth-child 伪类失效，因其依赖父容器中物理位置而非逻辑序号；应改用稳定 data 属性（如 data-id 或 data-order）配合 queryselector 精准定位。
动态排序后，列表元素的 DOM 顺序变了，但如果你之前用 querySelector（比如 document.querySelector('.item:nth-child(1)')）硬编码索引绑定序号，就会失效——因为 :nth-child 依赖的是**父容器中的物理位置**，不是逻辑序号或数据索引。
核心问题：:nth-child 不代表“第几个数据项”
:nth-child(n) 匹配的是父元素下第 n 个子元素（无论 class、内容如何），而排序后 DOM 节点位置重排，原来第 1 个数据项可能已变成第 5 个子节点。直接靠 CSS 伪类定位会错位。
推荐做法：用 data 属性 + querySelector 精准定位
给每个列表项添加唯一、稳定的标识（如 data-id 或 data-index），排序后保持不变。再用 querySelector 按属性查找，而非位置：
- 排序前为每个
<li>设置：<li data-id="1024">...</li> - 排序后，仍可用
document.querySelector('[data-id="1024"]')精准拿到它，不受位置影响 - 若需按新顺序更新显示序号，遍历当前 DOM 列表（如
listEl.querySelectorAll('li')），用forEach((el, i) => el.dataset.displayIndex = i + 1)动态写入
避免陷阱：别依赖 NodeList 的“原始顺序”
用 querySelectorAll('.item') 获取的 NodeList 是实时快照，反映当前 DOM 结构。但如果你缓存了旧的 NodeList 并在排序后继续用它遍历，索引就和视觉顺序脱节。正确做法是：
- 每次需要序号绑定时，重新调用
querySelectorAll获取最新列表 - 或监听排序完成事件，在回调里执行重绑定逻辑
- 不复用排序前保存的元素引用数组（除非你同步更新了它们的 index 映射）
补充技巧：用自定义属性驱动 UI 序号
让 HTML 和 JS 都读取同一来源，更可靠：
- 渲染时写入
<li data-order="3">（对应排序后的逻辑序号） - CSS 中用
content: attr(data-order)配合::before显示序号，无需 JS 操作文本 - JS 如需操作某序号项，查
document.querySelector('[data-order="3"]')即可
