javascript - CSS选择奇数/偶数类但在不同的父级下

Question

HTML 模型如下:

<div class="wrapper">
    <div class="parent">
      <div class="target">text in even</div>
    </div>
    <div class="parent">
      <div class="target">text in odd</div>
    </div>
    <div class="parent">
      <div class="target">text in even</div>
    </div>
    <div class="parent">
      <div class="target">text in odd</div>
    </div>
</div>

我在 jQuery 中测试我们可以使用 jQuery 的 even/odd() 方法来选择预期的类，如下所示:

> $(".target:even()")
> $(".target:odd()")

但是CSS有没有简单的方法呢？请注意这些 .target 类有不同的父类，nth-child() 和 nth-of-type() 不起作用(如果我错了请纠正我)。

更新:我也尝试了以下但对我不起作用。

.parent:nth-of-type(2n) target { }
.parent:nth-of-type(2n+1) target { }

谢谢!

Answer 1

为此你可以使用nth-child(odd) 和 nth-child(even)

.parent:nth-child(even) .target{
color:green;
}

.parent:nth-child(odd) .target{
color:red;
}

<div class="wrapper">
    <div class="parent">
      <div class="target">text in odd</div>
    </div>
    <div class="parent">
      <div class="target">text in even</div>
    </div>
    <div class="parent">
      <div class="target">text in odd</div>
    </div>
    <div class="parent">
      <div class="target">text in even</div>
    </div>
</div>

P.S 你在使用 nth-of-type 时错过了目标中的 .

.parent:nth-of-type(2n)  .target{
color:green;
}

.parent:nth-of-type(2n+1)  .target{
color:red;
}

<div class="wrapper">
    <div class="parent">
      <div class="target">text in odd</div>
    </div>
    <div class="parent">
      <div class="target">text in even</div>
    </div>
    <div class="parent">
      <div class="target">text in odd</div>
    </div>
    <div class="parent">
      <div class="target">text in even</div>
    </div>
</div>