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

fiddle

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

Answer 1

请勿使用nth-child，请使用nth-of-type

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

<强> jsFiddle example

Answer 2

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

使用：nth-of-type ，例如

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

Answer 3

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

Your updated 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;}

请记住，如果browser support对您很重要，您可能希望为zebra-striping服务器端生成其他类。

CSS div交替颜色

3 个答案: