爲每行的三個元素重複CSS效果

我正在做一個小用戶界面，其中我有一些元素，排列成三行。這些元素是浮動的，它們的寬度是width:33.3333%。因此每個row有3個。我不知道總共有多少個，因爲我將通過json來調用它們。當用戶點擊一張卡片時，它會旋轉並展開，如您在THIS LIVE EXAMPLE中所看到的。我希望第一張背卡有X margin，第二張有Y margin，第三張有Z margin。所以不同。但是必須重複所有rows這個屬性。有沒有辦法做到這一點CSS選擇？我試過:nth-child但它不起作用。爲每行的三個元素重複CSS效果

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

來源

2016-02-01 panagulis72

如果這個旨在編輯你的[前一個問題（http://stackoverflow.com/questions/35127930/請選擇前三個元素在CSS中並重復），請編輯您的上一個問題。不要轉貼。 – BoltClock

您正在將: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; 
}

來源

2016-02-01 11:47:36 ThemesCreator

這解決了這個問題。謝謝youuu – panagulis72

爲每行的三個元素重複CSS效果

回答

相關問題