CSS div交替颜色

我试图斑马条纹我的divs在我的网站，听起来很简单，但我发现，当我添加一个标题在我的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;
}

fiddle

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

解决方法

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

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

jsFiddle example

原文地址：https://www.jb51.cc/css/221893.html