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

【问题标题】：Repeat a CSS effect for the three elements of each row对每行的三个元素重复一个 CSS 效果
【发布时间】：2016-05-09 20:11:30
【问题描述】：

我正在做一个小的用户界面，其中有一些元素，按三行排列。这些元素是浮动的，它们的宽度是 width:33.3333% 。所以对于每个 row 有 3 个。我不知道总共有多少，因为我将通过 json 调用它们。当用户点击一张卡片时，它会旋转并展开，如您在THIS LIVE EXAMPLE 中所见。我希望第一张背卡有一个 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;
 }

【问题讨论】：

如果这是为了编辑您的previous question，请编辑您之前的问题。请勿转载。

标签： css css-selectors css-transitions

【解决方案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;
 }

【讨论】：