我有一个 <DIV>
结构表,我想为交替行提供背景颜色。
最初是我的 <DIV>
结构是这样的(如 Fiddle - *Option 1 所示):*
HTML
<div class="Case">
<div class="group">
<div class="Link subdiv">ghdfgdfg</div>
<div class="Time subdiv"></div>
<div class="Committer subdiv">gdfg</div>
<div class="Description subdiv">dfgdfg</div>
<div class="ChangeSetFiles subdiv">gdfgfgdg</div>
</div>
<div class="group">
<div class="Link subdiv">ghdfgdfg</div>
<div class="Time subdiv"></div>
<div class="Committer subdiv">gdfg</div>
<div class="Description subdiv">dfgdfg</div>
<div class="ChangeSetFiles subdiv">gdfgfgdg</div>
</div>
<div class="group">
<div class="Link subdiv">ghdfgdfg</div>
<div class="Time subdiv"></div>
<div class="Committer subdiv">gdfg</div>
<div class="Description subdiv">dfgdfg</div>
<div class="ChangeSetFiles subdiv">gdfgfgdg</div>
</div>
<div class="group">
<div class="Link subdiv">ghdfgdfg</div>
<div class="Time subdiv"></div>
<div class="Committer subdiv">gdfg</div>
<div class="Description subdiv">dfgdfg</div>
<div class="ChangeSetFiles subdiv">gdfgfgdg</div>
</div>
</div>
CSS
.Case {
border:1px solid #dbdbde;
font-weight:normal;
}
.group {
display:table;
border-top: 1px solid #dbdbde;
width: 100%;
}
.group div {
vertical-align:top;
}
.group:nth-child(even) {
background-color:#f9f9f9;
}
.subdiv {
display:table-cell;
border-left:1px solid #dbdbde;
padding:10px;
word-wrap: break-word;
}
.subdiv:nth-child(1) {
border-left:none;
}
工作正常!!! 但是,当我再添加一行“空”DIV 时,此“.group:nth-child(even) {background-color:#f9f9f9;}
”代码停止工作。
(如 Fiddle - *Option 2 所示):*
这是新代码: HTML
<div class="Case">
<div class="group">
<div class="Link subdiv">ghdfgdfg</div>
<div class="Time subdiv"></div>
<div class="Committer subdiv">gdfg</div>
<div class="Description subdiv">dfgdfg</div>
<div class="ChangeSetFiles subdiv">gdfgfgdg</div>
</div>
<div class="empty"></div>
<div class="group">
<div class="Link subdiv">ghdfgdfg</div>
<div class="Time subdiv"></div>
<div class="Committer subdiv">gdfg</div>
<div class="Description subdiv">dfgdfg</div>
<div class="ChangeSetFiles subdiv">gdfgfgdg</div>
</div>
<div class="empty"></div>
<div class="group">
<div class="Link subdiv">ghdfgdfg</div>
<div class="Time subdiv"></div>
<div class="Committer subdiv">gdfg</div>
<div class="Description subdiv">dfgdfg</div>
<div class="ChangeSetFiles subdiv">gdfgfgdg</div>
</div>
<div class="empty"></div>
<div class="group">
<div class="Link subdiv">ghdfgdfg</div>
<div class="Time subdiv"></div>
<div class="Committer subdiv">gdfg</div>
<div class="Description subdiv">dfgdfg</div>
<div class="ChangeSetFiles subdiv">gdfgfgdg</div>
</div>
<div class="empty"></div>
</div>
CSS 与为“.empty”类添加的顶级样式相同
.empty {
background-color:#ccc;
display:block;
width:100%;
height:15px;
}
请建议我错过了什么???
最佳答案
关于html - 为交替的 <DIV> 行提供背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20548023/