css甚至不使用伪元素

Question

我有一个容器div名称thumb，它有几个名为pseudo elements的子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> 。

我的代码是

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

我的css：

odd

但我只获得{{1}}个样式。

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，因为它不作为这个容器的第4个孩子＆＃34;但是，我是我父母的第n个孩子吗？＆＃34;。

因此，您需要将`group` = 1 应用于:nth-child(odd/even)：

.col-half

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

Answer 3

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

Answer 4

请尝试以下操作： Demo

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

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

Answer 5

试试这个

 quat.setFromEuler(new THREE.Euler(pitch, yaw, roll));