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

Question

我正在做一个小用户界面，其中我有一些元素，按三行排列。这些元素是浮动的，它们的宽度是 width:33.3333% .因此，对于每个row有 3 个。我不知道总共有多少，因为我将通过json来称呼它们。当用户单击卡片时，它会旋转和扩展，如"此实时示例"所示。我希望第一张背卡有 X margin，第二张有 Y margin，第三张有 Z margin。所以都不一样。但是必须对所有rows重复此属性。有没有办法使用 CSS 选择器做到这一点？我已经尝试过:nth-child但它不起作用。

.hover:nth-child(3n+1){ 
 margin-left:10px;
 }
 .hover:nth-child(3n+2){ 
 margin-left:20px;
 }
.hover:nth-child(3n+3){ 
margin-left: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;
 }