:nth-child 无视 display: none 等显隐状态，仅按 dom 物理位置计数，导致序号与视觉顺序脱节；:nth-of-type 同样不感知显隐，仅过滤标签类型；真正按可见顺序样式需 js 动态管理类名。
因为 :nth-child 只看 DOM 位置，不看是否可见——display: none 的元素仍算在计数里，导致序号和视觉顺序脱节。
隐藏元素（display: none）为什么还参与 :nth-child 计数
:nth-child(n) 的本质是遍历父元素的子节点列表（NodeList），按 DOM 树中的物理顺序编号。CSS 的显隐状态（如 display: none、visibility: hidden、opacity: 0）完全不影响这个过程。
常见误判场景：
- 表格过滤后用
tbody > tr:nth-child(odd)实现斑马纹，但隐藏的<tr style="display:none"> 仍在计数中，导致第 1、3、5… 行实际对应的是第 1、2、3… 个可见行 <li>JS 动态插入或切换类名后，序号没变，但样式错位——不是渲染 bug，是计数逻辑本就如此</li> <li>用 <code>el.remove()或el.replaceWith()才真正移除节点；而el.style.display = 'none'只是“藏起来”，DOM 位置不变 - 无法区分同类标签中的不同状态：比如
tr.visible:nth-of-type(odd)依然会把display: none的<tr> 算进去——只要它还在 DOM 里，且是 <code>tr标签 - 对非标准结构无效：如果表格用了
<div role="row"> 模拟行，<code>:nth-of-type就完全失效（它只认真实标签名） - IE8 不支持，老项目需谨慎
- 每次显隐变化后，遍历所有当前可见的目标元素（如
document.querySelectorAll('tbody tr:not([style*="display: none"])')），逐个加row-1、row-2类，再用.row-odd/.row-even控制样式 - 避免直接操作
style.display，改用 class 切换（如tr.hidden），便于 JS 统一判断可见性：getComputedStyle(tr).display !== 'none' - 监听
MutationObserver监控父容器子节点增删，自动重跑序号分配——尤其适用于异步加载、虚拟滚动等场景 - 不要依赖
offsetHeight > 0或getBoundingClientRect().height判断可见性，它们受transform、clip-path等影响，不可靠
:nth-of-type 能解决吗？什么情况下不能用
:nth-of-type 同样不感知显隐状态，但它至少能绕过其他标签干扰，只统计同类型兄弟。在纯 <tr> 或 <code><li> 列表中，它比 :nth-child 更接近“可见顺序”的直觉。
但它有硬限制：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
真正可靠的方案：手动管理可见序号
当需要严格按“当前可见的第 n 个”应用样式时，必须放弃纯 CSS 方案，改用 JS 主动控制类名。
实操要点：
最常被忽略的一点：哪怕你用 JS 把元素 remove() 掉又 append() 回来，它的 :nth-child 序号也会重算——但只要没真正移除，仅靠 CSS 显隐，就永远别指望浏览器自动“腾座位”。
