html - 为交替的 行提供背景

Question

我有一个 <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;
}

请建议我错过了什么？？？

Answer 1

它会打破第一种格式，但你可以试试

.group:nth-child(4n-1) {
    background-color:#f9f9f9;
}

演示:Fiddle