css `nth-child` 选择器基于 dom 中的静态位置索引（如第1、2、3个子元素），而非可见性状态；即使通过 `display: none` 隐藏某些 `
这是前端开发中一个常见但易被误解的 CSS 行为：nth-child(n) 匹配的是在父元素下按文档顺序排列的第 n 个子元素，无论该元素当前是否可见（display: none）、是否被 JS 动态隐藏，甚至是否被 visibility: hidden 遮盖——它始终存在且占据其原始 DOM 位置。
在你的表格过滤逻辑中：
- 所有
始终保留在 DOM 中； - 仅通过切换 table-row-hide / table-row-show 类控制 display；
- 因此 .table-row-show:nth-child(odd) 实际匹配的是「DOM 中第 1、3、5…个
且同时拥有 table-row-show 类」的行——而非「当前可见的第 1、3、5…行」。 ✅ 正确解法：动态重置序号类（如 row-odd / row-even）
在每次过滤后，遍历所有 当前可见 的行（即 table-row-show），手动为其添加基于可见顺序的样式类：function updatetable() { const search = document.getElementById("table-search").value.toLowerCase(); const filterBy = select.value; const rows = table.querySelectorAll("tr"); // 推荐用 querySelectorAll 替代 getElementsByTagName // 先统一隐藏 rows.forEach(row => row.classList.remove("table-row-show").add("table-row-hide")); // 再筛选并标记可见行 const visibleRows = []; rows.forEach(row => { let txtValue = ""; if (filterBy === "name" && row.querySelector("th")) { txtValue = row.querySelector("th").textContent || row.querySelector("th").innerText; } if (txtValue.toLowerCase().includes(search)) { row.classList.remove("table-row-hide").add("table-row-show"); visibleRows.push(row); } }); // ✅ 关键步骤：为可见行重新分配奇偶类 visibleRows.forEach((row, index) => { row.classList.toggle("row-odd", index % 2 === 0); row.classList.toggle("row-even", index % 2 === 1); }); }对应 Tailwind CSS（需启用 safelist 或使用 @layer components）或自定义 CSS：
/* 方案一：纯 Tailwind（推荐） */ .row-odd { @apply bg-white dark:bg-gray-900; } .row-even { @apply bg-gray-50 dark:bg-gray-800; } /* 方案二：直接内联 class（更轻量） */ /* 在 JS 中：row.className = `table-row-show ${index % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800'}` */⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用 for...in 遍历 HTMLCollection（如 rows[i]），它会枚举原型属性，应改用 for...of、forEach 或传统 for (let i = 0; i
- getElementsByTagName 返回的是实时 HTMLCollection，而 querySelectorAll 返回静态 NodeList，更适合过滤场景；
- 若表格数据量极大（>1000 行），可考虑虚拟滚动或服务端分页，避免频繁 DOM 操作。
总结：nth-child 是结构选择器，不是状态选择器。当样式依赖于动态可见性时，必须由 JavaScript 主动维护反映真实渲染顺序的类名——这是可控、可预测且符合现代前端实践的解决方案。
