针对每个父母的每个其他孩子

Question

我一直在努力解决这个问题，现在是时候寻求帮助了。 我有这个：

<div class="news-images">
  <div class="col-md-12">
    <div class="grid">
      <div class="effect"></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="grid">
      <div class="effect"></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="grid">
      <div class="effect"></div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="grid">
      <div class="effect"></div>
    </div>
  </div>
</div>

我想要定位“效果”类的所有其他（2n + 1，奇数/偶数类型）实例。这可能是纯CSS还是我需要一些JavaScript？

谢谢！

Answer 1

你想要这个吗？如果没有，请简要解释一下。

.col-md-12:nth-child(odd) .effect{
  background: black;
  color: #fff;
}
.col-md-12:nth-child(even) .effect{
  background: blue;
  color: #fff;
}

<div class="news-images">
  <div class="col-md-12">
    <div class="grid">
      <div class="effect">hello world!</div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="grid">
      <div class="effect">hello world!</div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="grid">
      <div class="effect">hello world!</div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="grid">
      <div class="effect">hello world!</div>
    </div>
  </div>
</div>