CSS div交替颜色

Question

我试图在我的网站上斑马条纹我的divs,听起来很简单,但是我发现当我在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

不要使用nth-child,请使用nth-of-type

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

jsFiddle例子

Answer 2

你可能想要匹配类型,而不是孩子.

使用:nth-​​of-type等

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

还要记住,如果浏览器支持对您很重要,您可能希望为zebra-striping服务器端生成其他类.