从不同的容器中选择子元素

Question

你好我想知道如何从不同的容器中选择每一个div。这是我的结构：

<div class="bodyarea">
<div class="show">
    <div class="bigthumb">
    <div class="after"></div>
</div>
<div class="show">
<div class="bigthumb">
    <div class="after"></div>
</div>
</div></div>

我希望能够选择每一秒。在div之后并应用不同的风格，可能是类似的东西，但它不起作用。知道如何实现这一点吗？

.bodyarea .show .bigthumb .after:nth-child {
    position: absolute;
    left: 0;
    top: 255px;
    width: 100%; 
    display: block; 
}

.bodyarea .show .bigthumb .after:nth-child(2n) {
    position: absolute;
    left: 50%;
    top: 265px;
    width: 100%; 
    display: block; 
}

Answer 1

您需要在父母身上应用nth-child

.bodyarea .show:nth-child(1) .bigthumb .after {
  width: 100px;
  height: 100px;
  background: orange;
}
.bodyarea .show:nth-child(2) .bigthumb .after {
  width: 100px;
  height: 100px;
  background: red;
}

<div class="bodyarea">
  <div class="show">
    <div class="bigthumb">
      <div class="after"></div>
    </div>
    <div class="show">
      <div class="bigthumb">
        <div class="after"></div>
      </div>
    </div>
  </div>