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

Question

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

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;
 }

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

Repeat a CSS effect for the three elements of each row

css

css-selectors

css-transitions