CSS DIV交替颜色(CSS div alternating colour)

我想斑马条纹我的div在我的网站，听起来很简单，但是我发现，当我在我的div的行之间增加了一个头，似乎在奇/偶造型计数头

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:

不要使用第n个孩子 ，使用第n-型

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

例如的jsfiddle

Answer 2:

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

用途：类型n次的，如

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

Answer 3:

最简单的解决方法当然是来包装你想条纹的元素。

你更新的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;}

请记住还，如果浏览器支持对你很重要，你可能想生成斑马条纹服务器端的其他类来代替。

文章来源: CSS div alternating colour