css甚至不使用伪元素

Question

我有一个容器div名称wrapper ，它有几个名为thumb子div我想用偶数和奇数应用css pseudo elements 。

我的代码是

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

但我只得到odd风格。

Answer 1

由于基于兄弟索引应用odd和偶数关系，因此需要将其应用于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> 

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
}

这个选择器的名称确实引起了许多误解，因为它太容易误解你的方式。

Answer 3

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

Answer 4

试试这样： 演示

在你的CSS中，你使用父div显示偶数和奇数。 相反，你需要使用奇数/偶数重复的子元素

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

Answer 5

试试这一个

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

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