交替颜色

我试图在我的网站上斑马条纹我的 div，听起来很简单，但我已经发现，当我添加一个标题在我的 div 的行之间，它似乎计数标题的奇数/偶数样式

超文本标示语言

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

小提琴

我本以为已经在小提琴中的代码基本上会忽略标题并继续进行条带化，但它似乎将标题视为子标题

92683 次浏览
小开

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

您更新的 jsFiddle 。

超文本标示语言

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

还要记住，如果 浏览器支持对您很重要，那么您可能需要为带斑马条纹的服务器端生成其他类。

小开
最佳答案

不要使用 第 N 个孩子，使用 Nth-of-type

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


.container {
width: 600px;
margin: 0 auto;
}


.row {
line-height: 24pt;
border: solid 1px black;
}


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


h3 {
line-height: 36pt;
font-weight: bold;
color: blue;
}
<div class="container">
<h3>Title</h3>
<div class="row">Content</div>
<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>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<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>

小开

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

使用 翻译: nth-of-type，例如

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

提交答案