第N個孩子怪異的行爲

我有n個子設計，動畫懸停所以我潛水基於數字第N個孩子怪異的行爲

<ul id=""> 
    <li>  
     <p></p> 
    </li> 
    <li> 
     <p></p> 
    </li> 
    </ul>

和我的CSS的多我李效果看起來像這樣一個理：

li:nth-child(n+1){transform} 
li:nth-child(n+1):hover {} 
li:nth-child(n+2) { style but do not transform} 
li:nth-child(n+2):hover {} 
li:nth-child(n+3) {transform} 
li:nth-child(n+3):hover {}

的事情是我的第二n + 2的孩子繼承了改造，從我的N + 1周的CSS過渡，即使它不應該

，如果我刪除李：第n個孩子（N + 2） F ROM我的CSS我仍然可以看到第二個裏用我的第一次李如何使我的N + 2不繼承從N + 1

來源

2017-05-07 ma1169

嘗試使用奇數/偶數規則（例如'p：nth-child（odd）{0}} {* css rule */ }'。甚至相同。 – gaganshera

但我需要應用3重複風格不同風格想象一個for循環{1 2 3}如果我使用奇數即使然後我可以應用2重複風格{1,2}這不是我正在做的！ – ma1169

您需要因子3根據重複圖形，並添加偏移量（1，2或3）：

/* 1st, 4th, 7th, … item */ 
li:nth-child(3n+1){…} 

/* 2nd, 5th, 8th, … item */ 
li:nth-child(3n+2){…} 

/* 3rd, 6th, 9th, … item */ 
li:nth-child(3n+3){…}

有some good examples on MDN。

來源

2017-05-07 09:53:44 Joe

這是因爲n+1目標的一切（當n = 0的CSS目標1，當n = 1目標2時，當n = 2目標3等時）。（一般n+x意味着x後目標evertything包括x）

您可能需要使用:nth-child(1)爲先，:nth-child(2)秒等。

的n使用它作爲一個乘數時，通常是有用的。

來源

2017-05-07 09:39:55

但我的li是動態生成的，這是不可能的 – ma1169

第N個孩子怪異的行爲

回答

相關問題