对每行的三个元素重复CSS效果

Question

我正在做一个小用户界面，其中我有一些元素，排成三行。这些元素是浮动的，它们的宽度是宽度：33.3333％。因此每行有3个。我不知道确切的数量是多少，因为我将通过json调用它们。 当用户点击卡片时，它会旋转并展开，如您在此实例中所见。 我希望第一张背卡有X边距，第二张有Y边距，第三张有Z边距。所以不同。但是必须对所有行重复此属性。有没有办法用CSS选择器做到这一点？我曾经尝试过：n-child但是它没有用。 .hover：第n个孩子（3N + 1）{  保证金左：10px的;  }  .hover：第n个孩子（3N + 2）{  保证金左：20像素;  } .hover：第n个孩子（3N + 3）{ 保证金左：30PX;  }

Answer 1

您正在将:nth-child应用于不在同一父级下的元素。 每个.hover元素都位于.r4元素内，因此您应该这样做：

.r4:nth-child(3n+1) .hover{ 
  margin-left:10px;
}
.r4:nth-child(3n+2) .hover{ 
   margin-left:20px;
 }
.r4:nth-child(3n+3) .hover{ 
   margin-left:30px;
 }