是否存在仅对可见元素生效的CSS :nth-child替代选择器？

你提到的场景很典型：未过滤时表格的斑马纹正常显示，过滤隐藏部分行后，原本的nth-child(odd)会因为隐藏行仍存在于DOM结构中，导致可见行的颜色交替逻辑彻底混乱。

核心结论 #

目前没有原生CSS选择器可以直接匹配父元素下的可见子元素并按可见顺序计数（不存在类似:nth-visible-child(odd)的原生选择器）。nth-child这类结构伪类仅依据DOM树的静态结构位置判断，完全不受元素display:none等隐藏状态的影响。

纯CSS替代方案：用相邻兄弟选择器模拟交替效果 #

虽然无法直接按可见位置计数，但可以利用相邻兄弟选择器(+)结合:not(.hide)筛选可见元素，实现类似斑马纹的交替效果：

tr {
  background-color: #CDF;
}
/* 匹配每一个可见行的下一个可见行，切换背景色 */
tbody tr:not(.hide) + tr:not(.hide) {
  background-color: #DEF;
}
thead>tr {
  background-color: lightgreen;
}
.hide {
  display: none;
}

原理：

• 默认所有行使用#CDF底色
• 每一个可见行的下一个可见行会被设置为#DEF色，从而实现相邻可见行颜色交替的效果，避免隐藏行干扰。

更可靠的方案：JS辅助标记可见行奇偶类 #

如果需要严格和原生nth-child(odd)逻辑一致的“奇数可见行”着色，纯CSS很难精准实现，此时推荐在过滤行的同时，给可见行重新标记奇偶类：

修改后的JS代码：

const searchElem = document.querySelector('input');
const tableElem = document.querySelector('table');

function search() {
  const str = searchElem.value.toLowerCase();
  const rows = tableElem.querySelectorAll('tbody tr');
  let visibleCount = 0;

  rows.forEach(row => {
    const text = row.textContent.toLowerCase();
    const isVisible = !str.length || text.includes(str);
    
    if (isVisible) {
      row.classList.remove('hide');
      visibleCount++;
      // 根据可见顺序切换奇偶类
      row.classList.toggle('odd-row', visibleCount % 2 === 1);
    } else {
      row.classList.add('hide');
      row.classList.remove('odd-row');
    }
  });
}

searchElem.addEventListener('keyup', search);

对应的CSS：

tr {
  background-color: #CDF;
}
tbody tr.odd-row {
  background-color: #DEF;
}
thead>tr {
  background-color: lightgreen;
}
.hide {
  display: none;
}

这个方案能完美保证过滤后可见行的斑马纹始终正确，逻辑也更清晰可控。

内容的提问来源于stack exchange，提问作者user128511