javascript - css odd even 不使用伪元素

Question

我有一个名为 wrapper 的容器 div，它有几个名为 thumb 的子 div我想用偶数和奇数应用 css 伪元素。

我的代码是

<div class="wrapper">
   <div class="col-half">
      <div class="thumb">
        ...
      </div>
   </div>
   <div class="col-half">
      <div class="thumb">
        ...
      </div>
   </div>
   <div class="col-half">
      <div class="thumb">
        ...
      </div>
   </div>
   <div class="col-half">
      <div class="thumb">
        ...
      </div>
   </div>
</div>

还有我的CSS:

.wrapper:nth-child(even) .thumb:after{
    //some codes
}
.wrapper:nth-child(odd) .thumb:after{
    //some codes
}

但我只得到奇怪的样式。

Answer 1

由于 odd 和 even 关系是基于兄弟索引应用的，因此您需要将其应用到 col-half 上，因为这是重复的元素。

由于您的 thumb 元素是其父元素的第一个子元素，因此它只会满足 odd 选择器

.wrapper .col-half:nth-child(even) .thumb:after {
  content: 'x'
}

.wrapper .col-half:nth-child(odd) .thumb:after {
  content: 'y'
}

<div class="wrapper">
  <div class="col-half">
    <div class="thumb">
      ...
    </div>
  </div>
  <div class="col-half">
    <div class="thumb">
      ...
    </div>
  </div>
  <div class="col-half">
    <div class="thumb">
      ...
    </div>
  </div>
  <div class="col-half">
    <div class="thumb">
      ...
    </div>
  </div>
</div>