2012-12-04 136 views
8

我在我的網站上有div框。每隔一個盒子應該有另一種顏色的邊框。列表中的每個第二個div的CSS樣式

在一種情況下,div顯示爲列表。我無法更改HTML代碼,因爲它是自動生成的。在我的網站上的其他地方我不喜歡這樣的造型和它的工作原理:

.displayBlogpost:nth-child(2n+1) { 
    border: #B4C556 1px solid; 
} 

但隨着ol不工作了。我不知道如何訪問每秒.displayBlogpost-div。這是我的代碼:http://jsfiddle.net/8SbbL/

+0

是動態生成的列表(和事端你可以控制)或者你創建它在靜態HTML –

回答

12

要利用你需要把它應用到列表項的第n個孩子的,

http://jsfiddle.net/8SbbL/6/

你也可以使用nth-child(even)nth-child(odd)這讀取比您的更好2n-1

+0

看起來不錯! –

+0

謝謝!它完美的作品! – Katy

+0

這個「孩子(偶數)和孩子(奇數)」很簡單,效果很好。它使編碼更加清潔。謝謝! – Jornes

1

元素在一個li中,所以它始終是第一個也是最後一個元素。在實際的李上使用第n個孩子的技巧。

#searchresult li:nth-child(2n+1) .displayBlogpost { 
    border: #B4C556 1px solid; 
} 

工作叉:http://jsfiddle.net/FJuzm/

+0

也謝謝!對不起,我只能接受一個正確的答案 – Katy

相關問題