影響3個輸入羣體的第n個孩子

我有一個輸入表單處理課程應用程序，根據申請人數動態地添加額外輸入 - 每個申請人填寫他們的姓名，電子郵件和電話號碼。因此，如果用戶選擇2個申請人，則表單在默認3之後添加3個新輸入，依此類推。影響3個輸入羣體的第n個孩子

我想通過改變每組三個輸入的背景顏色來提高表單的可用性，例如，前三個是灰色的，接下來的三個是白色的，接下來的三個是灰色的等等。

我認爲我可以用nth-child做到這一點，但我不知道如何。輸入是在他們自己的div中，所以很容易影響他們，我只是不知道要在第十一個孩子括號裏放什麼才能實現它。

2013-11-01 ElendilTheTall

一些基本的HTML會很有用。 JSFiddel也許？ –

div:nth-child(6n), 
div:nth-child(6n-1), 
div:nth-child(6n-2){ 
    background-color: red; 
}

http://jsfiddle.net/bmMjm/

來源

2013-11-01 15:07:19

這個工作很好，一旦我選擇了正確的選擇，非常感謝。 – ElendilTheTall

你這樣做重複，每6項的模式。因此，您需要根據:nth-child(6n)。不幸的是，這變得有點冗長......

input:nth-child(6n+1), input:nth-child(6n+2), input:nth-child(6n+3) { 
    background: white; 
} 
input:nth-child(6n+4), input:nth-child(6n+5), input:nth-child(6n) { 
    background: lightgrey; 
}

jsFiddle

顯然默認爲white，所以第一個塊沒有嚴格來說必要的。

來源

2013-11-01 15:07:31 lonesomeday

影響3個輸入羣體的第n個孩子

回答

相關問題