html - 第 n 个子选择器不起作用

Question

我得到这样的动态结果:

<div class="statusContent">
   <div class="statusBox">
     <div class="title">Title</div>
     <div class="subTitle">Subtitle</div>
   </div>

   <div class="statusBox">
     <div class="title">Title</div>
     <div class="subTitle">Subtitle</div>
   </div>

    <div class="statusBox">
     <div class="title">Title</div>
     <div class="subTitle">Subtitle</div>
   </div>

   .....
</div>

我不知道带有 statusBox 类的 div 的数量。我正在尝试将 css 仅应用于 1、3、5、7 ... 带有 statusBox 类的 div。

我尝试用下一个 css 来做:

.statusContent div:nth-child(2n+1){
    margin-right: 2%;
  }

但这种样式也适用于具有 title 和 subtitle 类的 div。

我如何才能将它仅应用于具有 statusBox 类的 div？

Answer 1

.statusContent .statusBox:nth-child(odd) 这仍然只适用于 .statusContent 的直接子级的 div。你不能只在类上做基于 nth 的事情