html - 依赖于同级的交替选择器

Question

我的 html 看起来有点像这样:

<div class="page">
    <div class="header">Text</div>
    <div class="row">Text</div>
    <div class="row">Text</div>
    <div class="row">Text</div>

    <div class="header">Text</div>
    <div class="row">Text</div>
    <div class="row">Text</div>
    <div class="row">Text</div>
</div>

我想做的是创建一个 css，为所有偶数行提供背景色。我已经测试了 nth-child(even) 以尝试获得此结果，但是当我的 css 应用于 .page 时，第一组标题和行正在确定第二组着色的顺序。

例如:

CSS:

.row:nth-child(even)
{
    background: red;
}

然后这是我得到的结果:

<div class="page">
    <div class="header">Text</div>
    <div class="row">Text</div>    <--- Red
    <div class="row">Text</div>
    <div class="row">Text</div>    <--- Red

    <div class="header">Text</div>
    <div class="row">Text</div>
    <div class="row">Text</div>    <--- Red
    <div class="row">Text</div>
</div>

秒组的第一行没有颜色，这是正确的，但不是我想要完成的。

我想创建一个 css 规则，根据兄弟 .header 而不是父 .page 为行着色，所以无论第一组中的行数是偶数还是奇数，第二组中的第一个彩色行应该是第 1 行。

编辑 1:我忘了说我希望能够动态地添加/删除两个组中的行并且规则应该仍然适用，这就是为什么我不能专门为每一行着色。

编辑 2:HTML 标记必须保持不变，我不能嵌套行或类似的东西。

Answer 1

尝试

.header ~ .row:nth-child(even)
{
    background: red;
}