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

Question

我正在做一个小用户界面，其中有一些元素，按三行排列。这些元素是 float 的，它们的宽度是 width:33.3333% 。所以对于每个 row 有 3 个。我不知道总共有多少，因为我将调用他们通过 json。当用户单击卡片时，它会旋转并展开，如您在 THIS LIVE EXAMPLE 中所见。 .我希望第一张背卡有 X margin，第二张有 Y margin，第三张有 Z margin。所以都不同。但是必须对所有 行重复此属性。有没有办法用 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;
 }