2012-12-04 91 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

相关问题