CSS div交替颜色 [英] CSS div alternating colour

问题描述

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

HTML

 < div class =container> 
< h3>标题< / h3> 
< div class =row>内容< / div> 
< div class =row>内容< / div> 
< h3>标题< / h3> 
< div class =row>内容< / div> 
< div class =row>内容< / div> 
< div class =row>内容< / div> 
< h3>标题< / h3> 
< div class =row>内容< / div> 
< div class =row>内容< / div> 
< div class =row>内容< / div> 
< div class =row>内容< / 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; 
} 
  

小提琴

我本以为，小提琴中的代码基本上会忽略标题并进行条带化，但它似乎考虑

解决方案

不要使用 nth-child ，请使用 nth-of-type

  div.container> ; div：nth-​​of-type（odd）{
 background：＃e0e0e0; 
} 
  

jsFiddle示例

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

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

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

解决方案

Don't use nth-child, use nth-of-type

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

jsFiddle example

这篇关于CSS div交替颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！