Html 我怎么能有 ：not(.class)：nthoftype(even)

我用CSS来做这样的事情已经有一段时间了，但似乎这个特定的场景并不像它应该的那样工作.

我想要的是一个列表，就像你在Electron 表格中一样，每一行都从浅灰色到略深的灰色交替排列.

<style>
  .spreadsheet {
    display: grid;
    grid-auto-flow: row;
  }
  .spreadsheet > div {
    padding: 0.5rem;
  }
  .spreadsheet > :first-of-type {
    border-radius: 1rem 1rem 0 0;
  }
  .spreadsheet > :only-of-type {
    border-radius: 1rem;
  }
  .spreadsheet > :last-of-type {
    border-radius: 0 0 1rem 1rem;
  }
  .spreadsheet > :nth-of-type(odd) {
    background-color: #fafafa
  }
  .spreadsheet > :nth-of-type(even) {
    background-color: #eaeaea
  }
</style>

<div class="spreadsheet">
  <div>Line 1</div>
  <div>Line 2</div>
  <div>Line 3</div>
  <div>Line 4</div>
  <div>Line 5</div>
  <div>Line 6</div>
  <div>Line 7</div>
  <div>Line 8</div>
  <div>Line 9</div>
</div>

正如预期的那样，上述一切都运行得很好.现在我的问题是...在我的场景中，我使用JavaScript根据筛选器更改某些行的类.这样，我只想将过滤出的行的display设置为none，同时保持与以前相同的交替 colored颜色 模式.这还应该使第一行和最后一行具有圆角边框.

<style>
  .spreadsheet {
    display: grid;
    grid-auto-flow: row;
  }
  .spreadsheet > div {
    padding: 0.5rem;
  }
  .spreadsheet > :not(.hidden):first-of-type {
    border-radius: 1rem 1rem 0 0;
  }
  .spreadsheet > :not(.hidden):only-of-type {
    border-radius: 1rem;
  }
  .spreadsheet > :not(.hidden):last-of-type {
    border-radius: 0 0 1rem 1rem;
  }
  .spreadsheet > :not(.hidden):nth-of-type(odd) {
    background-color: #fafafa
  }
  .spreadsheet > :not(.hidden):nth-of-type(even) {
    background-color: #eaeaea
  }
  .hidden {
    display: none;
  }
</style>

<div class="spreadsheet">
  <div class="hidden">Line 1</div>
  <div>Line 2</div>
  <div class="hidden">Line 3</div>
  <div class="hidden">Line 4</div>
  <div>Line 5</div>
  <div>Line 6</div>
  <div>Line 7</div>
  <div class="hidden">Line 8</div>
  <div>Line 9</div>
</div>

你会注意到，Line 1是hidden，所以Line 2应该是#fafafa的background-color和1rem 1rem 0 0的border-radius，但两者都没有.当相同 colored颜色 的线条紧挨着时，这一点非常明显.

你有什么办法让我做到这一点吗？