CSS div交替颜色

前端之家收集整理的这篇文章主要介绍了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

猜你在找的CSS相关文章