Html CSS div 交替颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15004537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS div alternating colour
提问by Andrew Morris
I'm trying to zebra stripe my divs in my website, sounds simple enough, however I've found that when I added a header in between the rows of my divs it seems to count the header in the odd/even styling
我试图在我的网站上对我的 div 进行斑马条纹，听起来很简单，但是我发现当我在我的 div 的行之间添加一个标题时，它似乎以奇数/偶数样式计算标题
HTML
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
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;
}
I would have thought that the code already in the fiddle would basically ignore the header and carry on striping, but it appears that it considers the header as a child
我本以为小提琴中已经存在的代码基本上会忽略标题并进行条带化，但它似乎将标题视为子项
回答by j08691
Don't use nth-child, use nth-of-type
不要使用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>回答by Roger Lindsj?
You probably want to match on type, not child.
您可能想要匹配类型，而不是孩子。
Use :nth-of-typesuch as
使用:nth-of-type例如
.row:nth-of-type(odd) {
background: #e0e0e0;
}
回答by Jezen Thomas
The easiest solution is of course just to wrap the elements you want striped.
最简单的解决方案当然是将您想要条纹的元素包裹起来。
HTML
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
CSS
.row:nth-child(odd) {background: #e0e0e0;}
Bear in mind also that if browser supportis important to you, you might want to generate additional classes for zebra-striping server side instead.
还要记住，如果浏览器支持对您很重要，您可能希望为斑马条纹服务器端生成额外的类。
