CSS div交替颜色

我试图在我的网站斑马条纹我的div，听起来很简单，但是我发现，当我在我的divs行之间添加一个头，它似乎计数在奇数/偶数样式

HTML

<div class="container"> <h3>Title</h3> <div class="row">Content</div> <div class="row">Content</div> <h3>Title</h3> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> <h3>Title</h3> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> </div> 

CSS

 .container { width:600px; margin:0 auto; } .row { line-height:24pt; border: solid 1px black; } .row:nth-child(odd) { background: #e0e0e0; } h3 { line-height:36pt; font-weight:bold; color:blue; } 

小提琴

我会认为已经在小提琴中的代码基本上会忽略标题，并进行条带化，但它似乎认为标题是一个孩子

Answer 1

不要使用nth-child ，使用nth-type

 div.container > div:nth-of-type(odd) { background: #e0e0e0; } 

jsFiddle的例子

Answer 2

最简单的解决scheme当然只是包装你想要条纹的元素。

你更新的jsFiddle 。

HTML

 <div class="container"> <h3>Title</h3> <div class="zebra"> <div class="row">Content</div> <div class="row">Content</div> </div> <h3>Title</h3> <div class="zebra"> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> </div> <h3>Title</h3> <div class="zebra"> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> </div> </div> 

CSS

 .row:nth-child(odd) {background: #e0e0e0;} 

同时请记住，如果浏览器支持对您很重要，您可能需要为斑马条带服务器端生成额外的类。

Answer 3

你可能想匹配types，而不是孩子。

使用：nth-​​type-type如

 .row:nth-of-type(odd) { background: #e0e0e0; }