使用CSS隐藏行后如何保留“斑马条纹”表

Question

我有一个表（标识为table），其中每一行都具有属性data-tagged，当创建（由JS创建）时，它被设置为"true"，并且可以通过各种功能将其设置为"false"。我正在使用以下CSS隐藏data-tagged属性为"false"的行：

#table tr[data-tagged="false"] {
  display: none;
}

而且我正在使用以下CSS产生“斑马条纹”效果，即：为交替的行提供不同的背景色：

#table tr:nth-child(even) {
  background-color: var(--other-background);
}

...直到我意识到该行的颜色没有发生变化，其他行被隐藏和未隐藏，这是有道理的，因为它仍然只是受CSS影响的偶数子项，因此我尝试使用以下选择器：

#table tr[data-tagged="true"]:nth-of-type(even) { ... }

...认为这只会影响属性tr等于data-tagged的其他"true"（期望的结果！），但是我错了，并且没有区别。这仅在CSS中是行不通的吗，还是有我没有看到的解决方案？

Answer 1

也许尝试：

#table tr:not([data-tagged="false"])::nth-child(even){background:#fff;}
#table tr:not([data-tagged="false"])::nth-child(odd){background:#eee;}