每个 parent 中的每个其他 children 个目标

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>

我想针对 "effect" class 的所有其他实例（2n+1，odd/even 之类的东西）。纯 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>

每个 parent 中的每个其他 children 个目标

Target every other children of each parent

html

css

css-selectors