CSS div交替颜色

前端之家收集整理的这篇文章主要介绍了CSS div交替颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图斑马条纹我的divs在我的网站,听起来很简单,但我发现,当我添加一个标题在我的divs之间的行,似乎计数的头/

HTML

@H_502_4@<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

@H_502_4@.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; }

fiddle

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

解决方法

@H_404_17@ 不要使用 nth-child,使用 nth-of-type @H_502_4@div.container > div:nth-of-type(odd) { background: #e0e0e0; }

jsFiddle example

猜你在找的CSS相关文章