CSS伪元素的奇偶性样式无法生效

Question

我有一个容器div，名为wrapper，它有几个子div，名为thumb。 我想要在偶数和奇数上应用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
}

但是我只得到了奇数样式。

- Musa Muaz

---

你期望的输出是什么？需要创建一个演示吗？ - G.L.P

请在下面的回答中找到您错了的地方的解释。 - connexo

Answer 1

由于“奇偶”关系是基于同级索引应用的，因此您需要将其应用于“col-half”，因为它是重复的元素。

由于您的“缩略图”元素是其父级的第一个子元素，因此它只符合“奇数”选择器

.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>

- Arun P Johny

Answer 2

你对:nth-child存在误解，它不是作为“这个容器的第n个子元素”，而是作为“我是否是父元素的第n个子元素”。因此，你需要将:nth-child(odd/even)应用于.col-half:

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

这个选择器的名称真的引起了很多误解，因为很容易误解你所做的方式。

- connexo

Answer 3

.col-half:nth-child(even) {
    color: green;
}
.col-half:nth-child(odd) {
    color: red;
}

- Tushar

Answer 4

尝试这样做：演示 在您的CSS中，您正在使用父div来显示偶数和奇数。相反，您需要使用重复的子元素的odd / even。

.col-half:nth-child(even) .thumb{
  background:#ccc;
}
.col-half:nth-child(odd) .thumb{
   background:#f00;
}

- G.L.P

Answer 5

试试这个

.wrapper .col-half:nth-child(2n) .thumb:after {
  content: '';
}

.wrapper .col-half:nth-child(2n-1) .thumb:after {
  content: '';
}

- Saiyam Gambhir