CSS div交替颜色
CSS div交替颜色
提问于 2013-02-21 22:19:09
我正试着在我的网站上给我的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;
}我本以为已经在小提琴中的代码基本上会忽略头部并继续进行条带化，但它似乎将头部视为子级
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-02-21 22:24:25
不要使用nth-child，使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15004537
复制相关文章
相似问题