使用CSS的斑馬條紋嵌套列表

使用:nth-child(odd/even)僞類很容易使用交替背景對列表和行進行樣式設置，但是如果嘗試將其應用於嵌套列表，它會顯得很醜。使用CSS的斑馬條紋嵌套列表

我的問題是，有沒有什麼方法可以根據深度/層次結構進行交替，例如，父級顏色會無限期地與子元素交替出現。例如：

2012-03-26 Greg

簡答題，沒有。很長的回答，是的，通過鎖定嵌套項目，例如：

li:nth-child(odd) {background:blue} 
li:nth-child(odd) li:nth-child(even) {background:blue} 
li:nth-child(even) li:nth-child(odd) {background:blue}

但是，超過2或3個級別，你可能會需要很多的規則。

你也可以用javascript來做到這一點，通過走下樹並遞增計數器，當計數器是奇數或偶數時應用樣式。

2012-03-26 06:35:17 SpliFF

哦，雅，會更方便。如果（color ==「green」）{color = red; } else {color = green;完成。 – user1289347 2012-03-26 06:37:16

無賴。謝謝！ – Greg 2012-03-26 06:41:29

2012-03-26 06:34:37 user1289347

不完全是我想到的，因爲你仍然可以有第一個孩子與父母相同的顏色：http://jsfiddle.net/aqTwZ/ – Greg 2012-03-26 06:37:25

是因爲你添加了一個圖層。您將不得不爲每個圖層添加規則，例如SpliFF提到的。但是，嘿，我做了你給我工作的例子。 – user1289347 2012-03-26 06:44:21

是的，對不起 - 這個例子應該更深入一些層次，但我想我忘了保存在jsfiddle中。不管怎麼說，還是要謝謝你。 – Greg 2012-03-26 06:46:00

回答