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（偶数）以尝试获得此结果但是当我的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>

秒组＆＃39;第一行没有着色，这是正确的，但不是我想要完成的。

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

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

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

Answer 1

试

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

Answer 2

嵌套行

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

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

Answer 3

如果我理解你的话，这可能会有所帮助：

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

的CSS：

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

交替选择器取决于兄弟

3 个答案: