如何让 CSS 影响所有其他不可见的元素

Question

我正在尝试使用 CSS 来替换我的

div

中的背景颜色。我可以做到这一点，但是

div

的显示会发生变化。我希望能够“仅”替换当前可见的内容。否则，根据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

都是可见的，并且

background-color

会交替出现，但是当某些

div

变得不可见时，看起来没有任何变化（即颜色交替的顺序是相同的，并且没有根据可见度）。.dialog
默认设置为

display:flex

。 JavaScript 可以将每个单独的元素设置为

display:flex

或

display:none

，但在加载页面时不会单独设置这些元素。因此，为什么我尝试

not(\[style\*="none"\])

而不是

[style="flex"]

，因为我不确定 css 是否以不同的方式处理这两种情况。

我确信我可以通过让 js 在更改显示时添加/删除类来解决问题。我只是想知道是否有一些仅 css 的解决方案。

Answer 1