如何用CSS仅对可见div实现背景色交替显示？

需求：给一组div设置交替背景色，仅对当前可见的div生效，当部分div动态隐藏/显示时，交替顺序要自动更新，不能被隐藏元素打乱。

最初尝试的方案（无效） #

一开始用CSS属性选择器结合:nth-child，试图排除隐藏的div：

.dialog {
  display:flex;
  flex-direction:row;
  align-items:center;
  background-color: #FFFFFF22;
}
#output-table > .dialog:not([style*="none"]):nth-child(odd) {
  background-color: #FFFFFF11;
}

对应的HTML结构：

<div id="output-table">
  <div class="dialog">stuff1</div>
  <div class="dialog">stuff2</div>
  <div class="dialog">etc....</div>
</div>

问题：页面加载时所有div可见，背景色正常交替，但当部分div被JS设置display:none隐藏后，:nth-child(odd)依然基于所有子元素的位置计数，不是仅可见元素，导致交替顺序错乱。

第二种尝试（无效） #

改用JS给可见元素加show类，隐藏元素加hide类，然后针对show类设置奇偶样式：

.dialog {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#output-table>.show:nth-child(odd) {
  background-color: #FFFFFF11;
}

#output-table>.show:nth-child(even) {
  background-color: #FFFFFF22;
}

对应的HTML结构：

<div class="output-table">
  <div class="dialog show"></div>
  <div class="dialog show"></div>
  <div class="dialog hide"></div>
  <div class="dialog hide"></div>
  <div class="dialog hide"></div>
  <div class="dialog show"></div>
  <div class="dialog show"></div>
  <div class="dialog show"></div>
  <div class="dialog hide"></div>
</div>

问题：:nth-child(odd/even)还是基于父元素下的所有子元素计数，遇到隐藏的hide元素后，后续的show元素会重新开始奇偶计数，导致交替仅在连续可见的元素组内生效，不符合需求。

最终解决方案（有效） #

使用CSS的:nth-child(of <selector>)语法，先筛选出目标元素再进行奇偶计数：

.hide{
    display:none;
}
#output-table > div:nth-child(odd of div.show){
    background-color: #FFFFFF11;
}
#output-table > div:nth-child(even of div.show){
    background-color: #FFFFFF22;
}

原理 #

默认的:nth-child(odd/even)是对父元素下所有子元素进行位置计数，而:nth-child(odd of div.show)会先筛选出父元素下所有带show类的div，再对这些筛选后的元素进行奇偶位置计数，完全忽略隐藏的hide元素，因此不管元素怎么动态显示/隐藏，交替背景色都会基于当前可见元素的顺序正常生效。

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